使用JavaScript删除某个类的所有元素

Question

HTML:

var paras = document.getElementsByClassName('hi');

for (var i = 0; i < paras.length; i++) {
  paras[i].style.color = '#ff0011';
  // $('.hi').remove();
}

我到目前为止的JS:

<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>

在jQuery中,这太简单了.($('.hi').remove();).我想学习JS,然后学习jQuery.

我被困了,谷歌没有提供.我不想成为复制/粘贴jQuery程序员.我刚开始学习JS.谢谢.

Answer 1

要删除元素,请执行以下操作:

el.parentNode.removeChild(el);

MDN是一个很好的参考.以下是一些相关页面:

节点
parentNode
removeChild

但是,如果你像这样循环,你会遇到问题,因为getElementsByClassName返回一个实时列表,当你删除一个节点时,元素也会从列表中删除,所以你不应该增加或者你最终会跳过所有其他元素.而是只是不断删除列表中的第一个元素,直到没有第一个元素:

var paras = document.getElementsByClassName('hi');

while(paras[0]) {
    paras[0].parentNode.removeChild(paras[0]);
}?

IMO jQuery很高兴向您展示Javascript中可以做什么.我实际上建议在大约一到两周的普通JS之后你学习jQuery,擅长它,并记住它抽象出来的东西.有一天,当你对使用jQuery时可以获得的Javascript范围,对象等有很好的把握时,请回过头来尝试学习如何在没有库的情况下更好地与DOM进行交互.这样你就可以更轻松地学习普通的JS,你会欣赏图书馆可以为你提供更多的抽象,同时了解当你只需要一两件东西时,你可以自己编写包括整个图书馆.

Answer 2

[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

这里我Array.prototype.forEach用来轻松遍历类似数组的对象中的所有元素,即返回的静态NodeList querySelectorAll,然后使用removeChild()从DOM中删除项.

对于不支持的旧版浏览器querySelectorAll()或forEach():

var classMatcher = /(?:^|\s)hi(?:\s|$)/;
var els = document.getElementsByTagName('*');
for (var i=els.length;i--;){
  if (classMatcher.test(els[i].className)){
    els[i].parentNode.removeChild(els[i]);
  }
}

请注意,因为getElementsByTagName返回实时 NodeList,所以必须从后到前迭代项目,同时从DOM中删除它们.

还有一些较旧的浏览器不支持querySelectorAll但支持getElementsByClassName,您可以使用它来提高性能和减少代码.

Answer 3

简单的ES6答案：

document.querySelectorAll('.classname').forEach(e => e.remove());

说明：

1. document.querySelectorAll()循环通过文档返回一个中的元素节点列表与指定的选择器的所有元件（例如'.class'，'#id'，'button'）
2. forEach() 遍历NodeList并为每个元素执行指定的操作
3. e => e.remove() 从DOM中删除元素

但是请注意，并非所有浏览器（即IE）都支持此解决方案