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