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

这个问题已经在这里有了答案:




已关闭8年。






作为标题，谷歌搜索给了我所有的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”类的子级？提前致谢。

最佳答案

由于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

关于javascript - 从具有相同类(纯js)的节点中删除所有子节点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13555785/