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

tkclm6bt  于 2023-01-16  发布在  Java
关注(0)|答案(4)|浏览(454)

这看起来像是有一个快速答案的东西,但我找不到一个。也许我搜索错了术语?请不要使用库,虽然我不需要跨浏览器的回退,但我的目标是这个项目的所有最新版本。
我得到了一些元素:

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

这是可行的,但是我现在如何删除这些元素呢?我必须循环通过它们并执行element.parentNode.removeChild(element);操作吗?或者我缺少了一个简单的函数吗?

ifmq2ha2

ifmq2ha21#

是的,你几乎是对的。.querySelectorAll返回一个 * frozed NodeList*。你需要迭代它并做一些事情。

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

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

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

如果你只想查询一个元素,可以使用.querySelector,这样你就可以得到节点引用,而不需要使用索引。

cqoc49vn

cqoc49vn2#

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

请参见NodeList.prototype.forEach()Element.remove()

    • Internet Explorer支持**. IE不支持NodeList上的forEach,IE也不支持Element对象上的remove方法。因此,如果您还希望在IE中运行上述代码,只需在JavaScript代码的开头添加以下行即可。要删除元素,请使用Node.removeChild(或 * r使用Element.remove() polyfill *):

一个二个一个一个

hc2pp10m

hc2pp10m3#

使用Array.fromChildNode.remove时更加简洁:

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

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

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

kknvjkwl4#

我们可以使用remove()函数从querySelectorall()中删除元素。请确保remove函数只能在现代浏览器中使用。

// Fetch the elements to remove
   const elements = document.querySelectorAll('.class-name');

// Iterate through the elements and remove them
elements.forEach(element => {
  element.remove();
});

参考-https://bbbootstrap.com/code/remove-elements-that-were-fetched-using-queryselectorall-10186399

相关问题