0

我有一个代码：

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

4

4 回答 4

4

您已经从原始 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]);
}
于 2013-05-23T16:13:09.503 回答
1

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

mates.removeChild(mateToDelete);

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

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

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

this ( children.length) 的长度是 3， 的长度childNodes是 7，所以如果没有找到，循环就会中断！

编辑：如果要删除特定元素的多次迭代，请删除break;if 逻辑中的。如果您只寻找第一个，请离开break.

于 2013-05-23T16:14:25.543 回答
0

用这个：

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

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

于 2013-05-23T16:13:46.310 回答
-1

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

parent[0].removeChild(mateToDelete);
于 2013-05-23T16:15:06.577 回答