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

Question

可能重复：
使用 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]);
}

演示：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 中的支持有限。根据这个表，getElementsByClassName从版本 9 开始在 IE 中实现。

为了弥补这一点，您可以选择所有具有 ID 容器的元素的子节点，遍历它们并检查它们是否具有“deleteme”类，然后才删除它们。

Answer 3

此版本避免了使用.getElementsByClassName()某些 IE 版本不支持的其他版本。

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] );
    }
}​

这也会向后遍历结果数组，因此删除节点不会影响下一次迭代。

在这里提琴

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);
}

​</p>