如何删除使用 querySelectorAll 获取的元素？

这看起来像是一个快速的答案，但我找不到一个。也许我搜错词了？没有库请，虽然我不需要跨浏览器备份，我的目标是这个项目的所有最新版本。

我得到了一些信息:

element = document.querySelectorAll(".someselector");

这是工作，但我现在如何删除这些元素？我必须循环遍历它们并执行 element.parentNode.removeChild(element);操作吗，还是有一个简单的函数我没有执行？

86533 次浏览
小开
最佳答案

是的，你几乎是对的。 .querySelectorAll返回一个 冻结节点列表。你需要迭代它并做一些事情。

Array.prototype.forEach.call( element, function( node ) {
node.parentNode.removeChild( node );
});

即使只有一个结果，也需要通过 index 访问它，比如

elements[0].parentNode.removeChild(elements[0]);

如果只使用 想要查询一个元素，则改为使用 .querySelector。在这里，您只需获得 节点引用，而不需要使用索引进行访问。

小开

由于 NodeList已经支持 forEach，你只需使用:

document.querySelectorAll(".someselector").forEach(e => e.remove());
<div>
<span class="someselector">element 1</span>
<span class="someselector">element 2</span>
there shouldn't be any of the above "element" spans after you run the code
</div>

参见 Prototype.foreach ()和 Element.remove ()

Internet Explorer 支持。IE 不支持 NodeList上的 forEach，也不支持 Element对象上的 remove方法。因此，如果您还想在 IE 中运行上述代码，只需在 JavaScript 代码的开头添加以下代码行，然后使用 Node 移除 Child(oR 使用 < a href = “ https://developer.mozilla.org/en-US/docs/Web/API/Element.remove”rel = “ norefrer”> Element.remove () polyfill)来删除一个元素:

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
// ..then continue as usual with the forEach
document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));
<div>
<span class="someselector">element 1</span>
<span class="someselector">element 2</span>
Should be empty
</div>

小开

数组和 儿童节点，移除更加简洁:

Array.from(document.querySelectorAll('.someselector')).forEach(el => el.remove());

好的，刚刚看到 NodeList 是可迭代的，所以它可以做得更短:

document.querySelectorAll('.someselector').forEach(el => el.remove());

提交答案