从父级删除所有的子节点？

我有一个列表，我只想从中删除所有的子节点。 什么是最有效的方式使用jQuery？ 这是我的：

<ul id='foo'> <li>a</li> <li>b</li> </ul> var thelist = document.getElementById("foo"); while (thelist.hasChildNodes()){ thelist.removeChild(thelist.lastChild); } 

是否有一个捷径，而不是一次一个删除每个项目？

———–编辑—————-

每个列表元素都有一些附加的数据，以及一个像这样的点击处理程序：

 $('#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()); } 

最后我可能会为每个列表项添加button – 所以看起来像empty（）是要走的路，以确保没有内存泄漏？

Answer 1

你可以使用.empty() ，像这样 ：

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

从文档 ：

从DOM中删除所有匹配元素集合中的所有子节点。

Answer 2

其他用户build议，

 .empty() 

是好的，因为它删除所有后代节点（包括标签节点和文本节点）以及存储在这些节点内的所有types的数据。 查看JQuery的API空白文档 。

如果您希望保留数据，例如事件处理程序，则应使用

 .detach() 

如JQuery的API分离文档中所述 。

方法.remove（）可能用于类似的目的。