Question

我有一个代码：

<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'”。有什么想法吗？

Answer 1

您已经拥有原始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;
  }
}

为了完整起见（并且为了防止在评论中进一步争论：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]);
}

Answer 2

您不需要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。

Answer 3

使用此：

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

实施例： http://jsfiddle.net/t9nCT/1/

Answer 4

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

parent[0].removeChild(mateToDelete);

从DOM中删除元素

4 个答案: