javascript - 在多个元素上使用 remove()

Question

this:document.getElementsByClassName('warningmessage').remove();如果页面上有多个警告消息元素，则不起作用。

我怎样才能删除该类的所有元素？我必须使用一个for each吗？没有删除所有（）的命令吗？

谢谢你的提示！

Answer 1

使用纯 JavaScript，您可以这样做：

var nodes = document.getElementsByClassName('warningmessage');
for(var i = 0; i < nodes.length; i++){
  nodes[i].parentNode.removeChild(nodes[i]);
}

因此，您首先会获得您感兴趣的节点，然后遍历它们并将它们从其父节点中删除。

可悲的是没有forEach方法NodeList。但是，您可以这样做：

var nodes = document.getElementsByClassName('warningmessage');
[].forEach.call(nodes, function (node) {
  node.parentNode.removeChild(node);
});

Answer 2

您需要使用循环。下面的代码显示了您如何使用“普通”javascript 编写代码。

var elements = document.getElementsByClassName('warningmessage'),
    element;
while (element = elements[0]) {
  element.parentNode.removeChild(element);
}

工作演示。 ​</p>

Answer 3

使用 JQuery 会更容易：

$('.warningmessage').remove();

但是，当你不这样做时，它并不难。getElementsByClassName 可以返回项目的节点列表。所以你只需要遍历列表并删除每个项目：

var list = document.getElementsByClassName("warningmessage");
for(var i = list.length - 1; i >= 0; i--)
{
    var n = list[i];
    n.parentNode.removeChild(n);
}

Answer 4

你可以试试这个

var elms= document.getElementsByClassName('warningmessage');
while(elms.length>0){
   for(var i = 0; i < elms.length; i++){
      elms[i].parentNode.removeChild(elms[i]);
   }
}​

http://jsfiddle.net/gBwjA/

Answer 5

我以前有这个问题，我最终在这个算法中。

function removeElement(target) {
    if(target.hasOwnProperty('length')) {
        for(i=0; i<target.length; i++) {
            removeElement(target[i]);
        }
    } else {
        target.parentNode.removeChild(target);  
    }
}

然后你像这样调用函数：

removeElement(document.getElementById('the-id'));

或者如果你想删除一个 HTML 元素集合，那么你可以这样调用函数：

removeElement(document.getElementsByTagName('tag-name'));