Remove all child nodes from a parent?

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?

You can use .empty(), like this:

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

From the docs: > Remove all child nodes of the set of matched elements from the DOM.

A other users suggested,

.empty()

is good enought, because it removes all descendant nodes (both tag-nodes and text-nodes) AND all kind of data stored inside those nodes. See the JQuery's API empty documentation.

If you wish to keep data, like event handlers for example, you should use

.detach()

as described on the JQuery's API detach documentation.

The method .remove() could be usefull for similar purposes.