I'm trying to remove an element by tag name using javascript. I set up a click handler for a button called "clear". I'm trying to use the function the function clear to remove all of the li elements from a list. This is what I have so far:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (k = list.length; k >= 0; k++) {
    var parent = list.parentNode;
    parent.removeChild(list[k]);
  }
}

Where "test" is the name of a ul element i have in the HTML. I'm getting a message in the console that parent is undefined. Any suggestions on how I need to modify the code so that I can delete the li elements?

I'm trying to remove an element by tag name using javascript. I set up a click handler for a button called "clear". I'm trying to use the function the function clear to remove all of the li elements from a list. This is what I have so far:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (k = list.length; k >= 0; k++) {
    var parent = list.parentNode;
    parent.removeChild(list[k]);
  }
}

Where "test" is the name of a ul element i have in the HTML. I'm getting a message in the console that parent is undefined. Any suggestions on how I need to modify the code so that I can delete the li elements?

• javascript
• removechild
• getelementsbytagname

5 Answers 5

The problem seems to be that you’re starting at list.length and incrementing while k >= 0. Infinite loop.

Apart from that, you need to use list[k].parentNode, and you’re not declaring k, so:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (var k = list.length - 1; k >= 0; k--) {
    var item = list[k];
    item.parentNode.removeChild(item);
  }
}

Almost there, two small errors :

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (var k = list.length; k-- > 0; ) { // decrement from list.length-1 to 0
    var parent = list[k].parentNode; // you need the parent of the item, not the list
    parent.removeChild(list[k]);
  }
}

Note that decrementing instead of incrementing is the thing to do as the opposite order would make you skip some items of the dynamic nodelists.

You can generalize in somethig like that:

function clear(list) {
  for (var i = list.length, li; li = list[--i];)
    li.parentNode.removeChild(li);
}

clear(document.getElementById("test").getElementsByTagName("li"));

Your main errors was k++ instead of k-- and list.parentNode instead of list[k].parentNode – list is a NodeList, doesn't have a parent; each element of the list can have a different parent.

The NodeList returned by getElementsByTagName is (usually) live (dynamic). This means that it's length decreases as nodes are removed. You must therefore consider this in your loop.
Here are some more examples of how to get around it.

function clear() {
    var nodes = document.getElementById("test").getElementsByTagName("li"),
        i = nodes.length; // one var statement at beginning
    // Choose one of
    while (i--) { // same as `i-->0`
        nodes[i].parentNode.removeChild(nodes[i]); // remove nodes from end
    }
    // OR
    while (nodes.length) { // same as `nodes.length>0`, okay as dynamic list
        nodes[0].parentNode.removeChild(nodes[0]); // remove nodes from start
    }
    // OR
    for (; i >= 0; --i) {
        nodes[i].parentNode.removeChild(nodes[i]); // remove nodes from end
    }
    // etc
}

HTML :

<ul id="test" type="bullet">
    <li>apple</li>
    <li>Orange</li>
</ul>

<button onclick="Clearall()">Click me</button>

If your UL tag only contains the LI tag then try like below... It will help you..

function Clearall()
{
 document.getElementById("test").innerHTML="";
}

If your UL tag contains LI tag and other Tags then try like below.. It will help you..

Javascript :

function Clearall()
{
  var ul = document.getElementById("test");
  var lis = ul.getElementsByTagName("li");
  while(lis.length > 0)
  {
   ul.removeChild(lis[lis.length - 1]);
  }
}