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中是否有一个方法可以删除所有包含＆＃34; deleteme＆＃34;类？提前谢谢。

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中的支持有限。根据{{3}}，getElementsByClassName在版本9中已在IE中实现。

要对此进行桥接，您可以选择具有ID容器的元素子节点的所有节点，循环它们并检查它们是否具有“deleteme”类，然后才删除它们。

Answer 3

这个版本避免了使用.getElementsByClassName()，因为某些IE版本不支持其他人提到的。{/ p>

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

Answer 4

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

从具有相同类，纯js的节点中删除所有子节点

4 个答案: