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.