javascript - 如何从DOM中删除某个类的所有元素？

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

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

<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。谢谢。

最佳答案

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

el.parentNode.removeChild(el);

MDN是一个很好的引用。以下是一些相关页面:

Node
parentNode
removeChild

但是，如果这样循环，则会遇到问题，因为getElementsByClassName返回 Activity 列表，所以当删除节点时，该元素也会从列表中删除，因此不应增加，否则最终将跳过所有其他元素。而是连续删除列表中的第一个元素，直到没有第一个元素为止:

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

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

IMO jQuery非常擅长向您展示使用Javascript可以做什么。我实际上建议在大约一两个星期的普通JS之后学习jQuery，熟练掌握它，并记住它的抽象含义。有一天，当您精通Java范围，对象以及使用jQuery时可以获得的对象时，可以回过头来尝试学习如何在没有库的情况下更好地与DOM交互。这样一来，您将可以更轻松地学习普通的JS，并且会欣赏到库可以为您提供更多的抽象概念，同时了解到当您只需要一两个东西时，库就可以为您自己编写它们，而无需包括整个图书馆。