Remove all child nodes from a parent?
<p>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:</p>

<pre><code>&lt;ul id='foo'&gt;
  &lt;li&gt;a&lt;/li&gt;
  &lt;li&gt;b&lt;/li&gt;
&lt;/ul&gt;

var thelist = document.getElementById("foo");   
while (thelist.hasChildNodes()){
    thelist.removeChild(thelist.lastChild);
}
</code></pre>

<p>is there a shortcut rather than removing each item, one at a time?</p>

<p>----------- Edit ----------------</p>

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

<pre><code>$('#foo').delegate('li', 'click', function() {
    alert('hi!');
});

// adds element to the list at runtime
function addListElement() {
    var element = $('&lt;li&gt;hi&lt;/hi&gt;');
    element.data('grade', new Grade());
}
</code></pre>

<p>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?</p>

<p>Thanks</p>

<p>Thanks</p>
