从具有相同类,纯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