How to remove li from ul within a div

Question

I have a div, where in i do have a ul, where the ul has some li.

i just want to find some text and remove the li from the ul.

suppose eg:

<div id="div1">
  <ul>
    <li>Hello</li> <!--i need to remove this.-->
  </ul>
</div>

Yeah i need to remove the entire li which contains the text Hello — nimi, Dec 14 '09 at 12:16

James · Answer 1 · 2009-12-14T12:55:22.547

14

var div = document.getElementById('div1'),
    ul = div.getElementsByTagName('ul')[0],
    li = ul.getElementsByTagName('li'),
    len = li.length;

// Go backwards so that removing items has no effect
while (len--) {
    if ( /Hello/.test(getText(li[len])) ) {
        ul.removeChild(li[len]);
    }
}

function getText(node) {
    var s = '';
    node = node.firstChild;
    if ( node ) do {
        if ( node.nodeType === 3 ) {
            s += node.data;
        }
        if ( node.nodeType === 1 ) {
            s += getText(node);
        }
    } while ( node = node.nextSibling );
    return s;
}

edited Dec 14 '09 at 12:55

answered Dec 14 '09 at 12:03

James

109,676
31
162
175

This is the 2nd time in recent memory I've seen this recursive descent to get the textual representation of a node (the other is http://stackoverflow.com/questions/765419/javascript-word-count-for-any-given-dom-element/765427#765427), and of course jQuery's `text()` does it too. But why do this instead of `textContent || innerText` if you know you are dealing with an `Element` node as in this case? Genuinely curious.... – Crescent Fresh Dec 18 '09 at 03:45
@Crescent, See the answer by Kangax here: http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox ... The recursive-DOM-walking approach is the simplest way to make sure it works properly in all browsers. – James Dec 18 '09 at 09:12
@J-P: I had read and upvoted that answer before, just forgot all about it. Thanks! – Crescent Fresh Dec 18 '09 at 12:23

score 7 · Accepted Answer · answered Dec 14 '09 at 11:47

7

With jQuery, you can do this:

$("#div1 ul li:contains('Hello')").remove();

answered Dec 14 '09 at 11:47

Dominic Rodger

97,747
36
197
212

1

+1 That'd work just fine. Do you really need to specify div#div1? Couldn't you have done #div1 or is there a reason for this? – marcgg Dec 14 '09 at 11:49
@marcgg, no, that's probably overly verbose. Removed. – Dominic Rodger Dec 14 '09 at 11:50
yep, you could leave `div` out – NDM Dec 14 '09 at 11:50
You don't have to prefix tagname with id selector. – rahul Dec 14 '09 at 11:50
7

OP asked for JavaScript, not jQuery. – Mathias Bynens Dec 14 '09 at 12:49

Leo · Answer 3 · 2009-12-24T00:59:59.680

0

function removeLi()
{
    var DIV = document.getElementById('div1');
    var LI = DIV.getElementsByTagName('li');
    LI[0].parentNode.removeChild(LI[0]); //remove the first li
    //LI[1].parentNode.removeChild(LI[1]); //remove the second li
}

edited Dec 24 '09 at 00:59

answered Dec 14 '09 at 12:08

Leo

1,753
3
20
23

1

That doesn't remove only `li`s which contain the text 'Hello', per his requirements. – Dominic Rodger Dec 14 '09 at 12:19

How to remove li from ul within a div

3 Answers3