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

Question

他看起来像是一个快速回答的东西,但我找不到一个.也许我在搜索错误的条款？没有图书馆,虽然我不需要跨浏览器的后备,但我的目标是该项目的所有最新版本.

我得到了一些元素:

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

YEY!

如何删除这些元素？我错过了什么？我是否必须遍历它们并做这element.parentNode.removeChild(element);件事,或者是否有一个我缺少的简单功能？

Answer 1

是的,你几乎是对的..querySelectorAll返回一个冻结的NodeList.你需要迭代它并做事.

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

即使你只得到一个结果,你也需要通过索引访问它,比如

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

如果您只想查询一个元素,请.querySelector改用.在那里,您只需获取节点引用,而无需使用索引进行访问.

Answer 2

由于NodeList已经支持forEach你可以使用

document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));

<div>
  <span class="someselector">1</span>
  <span class="someselector">2</span>
  Should be empty
</div>

请参阅NodeList.prototype.forEach().请记住,不支持Internet Explorer.

编辑:Internet Explorer支持.如果你也想让上面的代码在IE中工作,只需在你的JS之前的任何地方添加这段代码:

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

..而且forEach在IE中也会突然支持NodeList.

Answer 3

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

好的，刚才看到NodeList是可迭代的，因此可以做得更短：

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