JavaScript移除所有具有名称的元素

Question

我正在尝试使用JavaScript删除所有具有特定名称的元素，但它仅删除第一个。

我的代码如下：

var ele= document.getElementsByName("javascriptaudio");
for(var i=0;i<ele.length;i++)
{
  ele[i].parentNode.removeChild(ele[i]);
}

请问有人可以告诉我出了什么问题吗？

谢谢。

- user2370460

---

哦，使用实时集合工作的美妙之处啊。试试向后删除。 - John Dvorak

考虑使用某种JS框架来摆脱那些样板（可能有错误！）代码。例如，在jQuery中，这只是$("[name=javascriptaudio]").remove();。 - Karoly Horvath

@karoly 另一个选择是更好地理解正在发生的事情，然后相应地编写代码。相信我，这样做会更加令人满意，并且产生具有较少依赖性的代码。 - John Dvorak

@JanDvorak：相信你哈哈。抽象正是为了不用担心这些细节。如果我在阅读代码，我想看到高层次的函数描述正在做什么，而不是内部实现，一个血腥的循环... 如果你想了解更多，那很好（甚至可能对你有满足感）。如果你构建一个框架/库，你应该这样做。但如果你是一个普通的开发者，这是我能给出的最好建议。每个自尊的开发者都会愉快地引入某种依赖来摆脱那种样板式代码。 - Karoly Horvath

Answer 1

我没有足够的声望在Álvaro G. Vicario进行评论。它能正常工作的原因是当元素从DOM中移除时，它也从ele中移除了。很奇怪。

下面的代码应该同样有效:

var ele= document.getElementsByName("javascriptaudio");
len = ele.length;
parentNode = ele[0].parentNode;
for(var i=0; i<len; i++)
{
  parentNode.removeChild(ele[0]);
}

- Andreas Kalin

---

在JavaScript中，对象始终按引用传递。删除一个元素会从任何地方都将其删除 :) - Álvaro González

Answer 2

尝试从后往前删除它们：

var ele = document.getElementsByName("javascriptaudio");
for(var i=ele.length-1;i>=0;i--)
{
    ele[i].parentNode.removeChild(ele[i]);
}

问题在于从ele中删除元素会导致索引发生变化：如果你有5个项目（0到4），并删除第0项，则剩下4个项目，从0到3（4变成3，3变成2，以此类推）。因此，你应该删除第0项，但你的i变量已经增加到了1。

- Álvaro González

---

这个答案是正确的，但可以加上一些解释来帮助提问者和未来的读者了解原因。 - JAAulde

你说得对，恐怕当我仅仅输入代码时就被叫去吃午饭了。我已经编辑了我的回答。 - Álvaro González

Answer 3

你需要在循环外保存数组的长度，因为如果你把它放在循环条件里面，它会在每次循环中被重新计算。这样，你就可以得到正确的迭代次数。此外，你还需要每次循环删除第一个项目，因为每次循环都会失去一个项目，所以在处理结束时你将超出范围。

var ele = document.getElementsByName("javascriptaudio");
var elementsCount = ele.length;
for(var i=0;i<ele.length;i++){
    ele[0].parentNode.removeChild(ele[0]);
}

- Zivko

Answer 4

尝试以下jQuery代码：

$("[name=javascriptaudio]").remove();

- Valentin Mercier

---

谁说jQuery可用？ - John Dvorak

应该是一个（不错的）注释。 - Karoly Horvath

@JohnDvorak 这个答案是有效的，为什么不使用jQuery呢？这是一个很好的解决方案！ - Vaiaro