從節點與同一類中刪除所有的孩子，純JS

Question

可能重複：
Remove all elements with a certain class with JavaScript

如題，谷歌搜索給了我所有的jQuery效果。有沒有這樣的方法？恩。

<div id="container"> 
    <div class="dontdelete">...</div> 
    <div class="deleteme>...</div> 
    <div class="dontdelete">...</div> 
    <div class="deleteme>...</div> 
    <div class="dontdelete">...</div> 
    <div class="deleteme>...</div> 
</div> 

是否有一個純JavaScript的方法來刪除所有具有「deleteme」類的子？提前致謝。

Answer 1

由於element.getElementsByClassName回報現場節點列表，您可以通過列表需要循環以某種方式（因爲從DOM移除它們從列表中刪除它們爲好）。嘗試是這樣的：

var container = document.getElementById("container"); 
var elements = container.getElementsByClassName("deleteme"); 

while (elements[0]) { 
    elements[0].parentNode.removeChild(elements[0]); 
} 

DEMO：http://jsfiddle.net/sR2zT/1/

或者你可以使用類似element.querySelectorAll選擇的元素，在這裏你可以做這樣的事情：

document.querySelectorAll("#container .deleteme") 
// or 
document.getElementById("container").querySelectorAll(".deleteme") 

在這場景中，你不需要需要做特殊循環，因爲querySelectorAll不包含直播節點列表。

參考文獻：

• getElementsByClassName() - https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
• querySelectorAll() - https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
• removeChild() - https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

Answer 2

您可能正在尋找getElementsByClassName以獲得您的所有元素。然後你可以使用類似removeChild的東西刪除節點。

​var elements = document.getElementById("container") 
        .getElementsByClassName("deleteme"); ​​​ 

while (elements.length > 0) { 
    elements[0].parentNode.removeChild(elements[0]); 
} 

工作實施例：http://jsfiddle.net/ja4Zt/1/

瀏覽器支持：

這種解決方案的唯一要注意的是，它有在IE有限的支持。根據this table,getElementsByClassName在IE版本9以上實現。

爲了彌補這一點，您可以選擇所有具有ID容器的元素的子節點，遍歷它們並檢查它們是否具有類「deleteme」 ，然後才刪除它們。

Answer 3

var divs = document.getElementsByClassName("deleteme"); 
for (var idx = 0; idx != divs.length; idx++) { 
    var div = divs[idx]; 
    while (div.firstChild) 
    div.removeChild(div.firstChild); 
} 

Answer 4

這個版本避免了使用哪一個作爲其他人所說的在某些版本的IE不支持.getElementsByClassName()。

var divs = document.getElementById("container").childNodes; 
var i = divs.length; 
while(i--) { 
    if(divs[i].className && divs[i].className.indexOf("deleteme") > -1) { 
     divs[i].parentNode.removeChild(divs[i]); 
    } 
}​ 

這也遍歷了結果數組，因此刪除節點不會影響下一次迭代。

小提琴here