Remove all child nodes from a parent?

Question

I have a list, I just want to remove all child nodes from it. What's the most efficient way using jquery? This is what I have:

<ul id='foo'>   <li>a</li>   <li>b</li> </ul>  var thelist = document.getElementById("foo");    while (thelist.hasChildNodes()){     thelist.removeChild(thelist.lastChild); } 

is there a shortcut rather than removing each item, one at a time?

----------- Edit ----------------

Each list element has some data attached to it, and a click handler like this:

$('#foo').delegate('li', 'click', function() {     alert('hi!'); });  // adds element to the list at runtime function addListElement() {     var element = $('<li>hi</hi>');     element.data('grade', new Grade()); } 

eventually I might add buttons per list item too - so it looks like empty() is the way to go, to make sure there are no memory leaks?

Answer 1

You can use .empty(), like this:

$("#foo").empty(); 

From the docs:

Remove all child nodes of the set of matched elements from the DOM.