从父级删除所有子节点？

我有一个列表，我只想从中删除所有的子节点。什么是最有效的方式使用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()); 
}

最后我想补充每个列表项的按钮 - 所以它看起来像空的（）是去，以确保不存在内存泄漏的方式吗？

来源

2010-06-15 user246114

高效的条款？性能，可读性？ – Gumbo 2010-06-15 11:53:29

加上@Gumbo的问题，还有多少关注是记忆？这些项目是否绑定了事件处理程序？ – 2010-06-15 11:54:34

考虑到更新后的答案，是'.empty（）'将是要去的方法，清除'$ .cache'中的数据：'element.data（'grade'，new Grade（））;'added in – 2010-06-15 12:02:07

137

您可以使用.empty()，像this：

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

From the docs：

取出一套从DOM匹配元素的所有子节点。

来源

2010-06-15 11:46:57

也值得注意的（从docs）*为了避免内存泄漏，jQuery从子元素中删除其他构造，如数据和事件处理程序，然后删除元素本身。* – user113716 2010-06-15 11:51:57

@patrick - + 1，另一个通过经常推荐使用'.html（''）'，因为数据并不存储在元素上，许多人都忘记了导致的泄漏。 – 2010-06-15 11:53:13

+1另外，如果您确定没有事件被绑定到父$'（“＃foo”）[0] .innerHTML =“”;'将会更快。注意，这样做时不会导致任何内存泄漏（'empty（）'已经非常小心，确保不会发生这种情况，特别是在IE中）。 – 2010-06-15 11:54:56

一个其他用户的建议，

.empty()

好到足够多的，因为它会删除所有子节点（包括标签节点和文本节点）和所有类型的存储这些节点中的数据。查看JQuery's API empty documentation。

如果你想保留的数据，例如像事件处理程序，你应该使用

.detach()

上的JQuery's API detach documentation描述。

.remove（）方法对于类似用途可能有用。

来源

2017-01-26 16:25:16

从父级删除所有子节点？

回答

相关问题