remove all <li> from <ul>?

Question

I am appending li in a ul using the following code:

for (var i = 1; i <= len; i++) {     li = document.createElement('li');      element = document.createElement("img");     element.setAttribute("src", path[i]);      li.appendChild(element);     root.appendChild(li); } 

Now, I want to remove all items from the list on a button click. This is what I am using, which isn't working:

while(root.hasChildNodes()){     root.removeChild('li'); }  

The condition is true but the inner line root.removeChild('li') doesn't work. I also tried these options:

root.removeChild(root li); root.removeChild('#listid li'); root.removeChild('ul li'); ... 

Answer 1

If you are using jQuery, why don't you use it's benefits?

adding <li> elements:

$("<li><img src='"+path[i]+"'></li>").appendTo(root); 

removing all <li> elements:

$(root).empty(); 

deleting one <li> element:

$("li:eq(3)",$(root)).remove(); 

and if you are using raw js, you can use:

document.getElementById("root").innerHTML = ""; 

Answer 2

You appear to be trying this with raw JavaScript:

while( root.firstChild ){   root.removeChild( root.firstChild ); } 

jQuery will only slow you down here.