从 DOM 中删除元素 [重复]答案

【问题标题】：Remove element from DOM [duplicate]从 DOM 中删除元素 [重复]
【发布时间】：2013-05-19 02:30:50
【问题描述】：

我有一个代码：

<ul class='mates'>
  <li class='m' id='1'>Jakub</li>
  <li class='f' id='2'>Vinnie</li>
  <li class='m' id='3'>David</li>
</ul>

此脚本根据用户输入选择“li”元素之一：

<script>
var mates = document.getElementsByClassName('mates')[0];
for (var i=0; i< mates.childNodes.length; i++){
    if(mates.children[i].innerHTML == 'Vinnie') alert("Got you! ID "+mates.children[i].id)
}
</script>

我需要删除这个元素：

<script>
var mates = document.getElementsByClassName('mates')[0];
for (var i=0; i< mates.childNodes.length; i++){
    if(mates.children[i].innerHTML == 'Vinnie') {
        alert("Got you! ID "+mates.children[i].id);

        parent = document.getElementsByClassName('mates');
        mateToDelete = mates.children[i];

        parent.removeChild(mateToDelete);
    }
}
</script>

这是我尝试过的几种不同方式，但总是出错，例如“无法调用未定义的方法‘removeChild’”。有什么想法吗？

【问题讨论】：

请注意childNodes 包括文本节点，例如换行符和缩进。也许你应该改用mates.children。
如果可以使用jQuery，当找到元素时，使用element.remove()
请注意getElementsByClassName 中的“s”，这表示它返回的是一个节点列表，而不是单个节点。因此，当您致电 parent.removeChild(mateToDelete) 时，您正在尝试删除列表。

标签： javascript html dom

【解决方案1】：

您不需要 parent 变量。使用这个删除它：

mates.removeChild(mateToDelete);

小提琴：http://jsfiddle.net/3XeM5/2/

我还修改了你的 for 循环以使用：

for (var i=0; i< mates.children.length; i++){

这个(children.length)的长度是3，childNodes的长度是7，所以如果什么都没找到，循环就会中断！

编辑：如果要删除特定元素的多次迭代，请删除 if-logic 中的 break;。如果您只寻找第一个，请留下break。

【讨论】：

看来它确实有效。但怎么会呢？ MDN 说这里需要父节点：developer.mozilla.org/en-US/docs/Web/API/…
你已经有一个包含你想要的孩子的变量。无需声明第二个变量。

【解决方案2】：

您已经从原始 getElementsByClassName 中获得了父节点，并且您的子节点通过了您刚刚执行的循环。

因此，很简单：

for (var i=0; i< mates.childNodes.length; i++){
  if(mates.children[i].innerHTML == 'Vinnie'){
    alert("Got you! ID "+mates.children[i].id)
    mates.removeChild(mates.children[i]);
    break;
  }
}

为了完整起见（并防止在 cmets 中进一步争论 :P），如果您实际上可能从您的列表中删除多个“Vinnie”，那么最好列出您的这些孩子想删除，然后像这样删除它们：

var toDelete=[],
    i;

for (i=0; i< mates.childNodes.length; i++){
  if(mates.children[i].innerHTML == 'Vinnie'){
    alert("Got you! ID "+mates.children[i].id)
    toDelete.push(mates.children[i]);
  }
}

for (i=0; i<toDelete.length; i++){
  mates.removeChild(toDelete[i]);
}

【讨论】：

@Asad 这就是为什么删除后会有中断。
@slinky2000 是的，我已经删除了我的评论。
可能不需要休息。如果出现有两个名叫维尼的“伙伴”的情况怎么办？建议在您的代码中添加注释，说明它只会匹配一次“Vinnie”。
@MichaelCoxon 在这种情况下，应将识别出的节点推入数组并在循环后删除。
@MichaelCoxon 问题不在于这个。

【解决方案3】：

你正在检索一个集合，所以这样做，

parent[0].removeChild(mateToDelete);

【讨论】：

不需要使用创建的父对象，因为它已经作为“伙伴”存在。
我的回答怎么错了？我会/会在某个时候编辑它，只是得到一个快速的答案
我只是 SO 的初学者，如果我错了，请纠正我，但是首先良好的实践和可靠的代码不是比“只是快速获得答案”更好吗？跨度>
@MichaelCoxon 你是对的，部分是我的错误，没有完全阅读代码。但是，一般来说，人们会得到一个答案并倾向于改进它:) 此外，只有错误的答案会被低估 afaik，部分正确的答案会被给予 cmets 以改进

【解决方案4】：

使用这个：

mates.removeChild(mates.children[i]);

示例： http://jsfiddle.net/t9nCT/1/

【讨论】：