javascript 从具有相同类的节点中删除所有子项，纯js

Remove all child from node with the same class, pure js

提问by wtsang02

Possible Duplicate:
Remove all elements with a certain class with JavaScript

可能的重复：
使用 JavaScript 删除具有特定类的所有元素

As title, google search gives me all jquery results. Is there a method that does this? ex.

作为标题，谷歌搜索给了我所有的 jquery 结果。有没有办法做到这一点？前任。

<div id="container">
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
</div>

Is there a method in pure javascript to delete all child with "deleteme" class? Thanks in advance.

纯javascript中是否有一种方法可以删除所有带有“deleteme”类的孩子？提前致谢。

回答by Ian

Since element.getElementsByClassNamereturns a livenode list, you need to loop through the list in a certain way (since removing them from the DOM removes them from the list as well). Try something like this:

由于element.getElementsByClassName返回一个活动节点列表，您需要以某种方式遍历列表（因为从 DOM 中删除它们也会将它们从列表中删除）。尝试这样的事情：

var container = document.getElementById("container");
var elements = container.getElementsByClassName("deleteme");

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

DEMO:http://jsfiddle.net/sR2zT/1/

演示：http : //jsfiddle.net/sR2zT/1/

Or you could use something like element.querySelectorAllto select the elements, where you can do things like this:

或者您可以使用类似的东西element.querySelectorAll来选择元素，您可以在其中执行以下操作：

document.querySelectorAll("#container .deleteme")
// or
document.getElementById("container").querySelectorAll(".deleteme")

In this scenario, you don'tneed to do speciallooping, because querySelectorAlldoesn't contain a livenode list.

在这种情况下，你并不需要做特别的循环，因为querySelectorAll不含有活的节点列表。

References:

参考：

• getElementsByClassName()- https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
• querySelectorAll()- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
• removeChild()- https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

• getElementsByClassName()- https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
• querySelectorAll()- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
• removeChild()- https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

回答by Christofer Eliasson

You are probably looking for getElementsByClassNameto get all your elements. Then you can use something like removeChildto delete the nodes.

您可能正在寻找getElementsByClassName获得所有元素。然后你可以使用类似的东西removeChild来删除节点。

?var elements = document.getElementById("container")
                   .getElementsByClassName("deleteme");    ???

while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
}

Working example: http://jsfiddle.net/ja4Zt/1/

工作示例：http: //jsfiddle.net/ja4Zt/1/

Browser support:

浏览器支持：

The only caveat with this solution is that it has limited support in IE. According to this table, getElementsByClassNamewas implemented in IE as of version 9.

此解决方案的唯一警告是它在 IE 中的支持有限。根据此表，getElementsByClassName从版本 9 开始在 IE 中实现。

To bridge this, you could select all nodes that are child of the element with ID container, loop over them and check if they have the class "deleteme", and only then delete them.

为了解决这个问题，您可以选择所有具有 ID 容器的元素的子节点，循环遍历它们并检查它们是否具有“deleteme”类，然后才删除它们。

回答by Bruno

This version avoids having to use .getElementsByClassName()which as others have mentioned is not supported in certain IE versions.

此版本避免了必须使用.getElementsByClassName()某些 IE 版本不支持的其他人提到的内容。

var divs = document.getElementById("container").childNodes;
var i = divs.length;
while( i-- ) {
    if( divs[i].className && divs[i].className.indexOf("deleteme") > -1 ) {
      divs[i].parentNode.removeChild( divs[i] );
    }
}?

This also traverses the resulting array backwards so deleting nodes doesn't affect the next iteration.

这也会向后遍历结果数组，因此删除节点不会影响下一次迭代。

Fiddle here

在这里摆弄

回答by Jim Blackler

var divs = document.getElementsByClassName("deleteme");
for (var idx = 0; idx != divs.length; idx++) {
  var div = divs[idx];
  while (div.firstChild)
    div.removeChild(div.firstChild);
}

?

?