從父級刪除所有子節點？

我有一個列表，我只想從中刪除所有的子節點。什麼是最有效的方式使用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

從父級刪除所有子節點？

回答

相關問題