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    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       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       lt li gt hi lt  hi gt         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

User · Accepted Answer

You can use  empty    like this       foo   empty      From the docs      Remove all child nodes of the set of matched elements from the DOM

User · Answer

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

[jquery] Remove all child nodes from a parent?

Examples related to jquery