如何从HTMLCollection中移除一个元素？

Question

我有一些Javascript代码，可以从HTMLCollection中删除一个项目，如下所示。当调用splice时，会出现错误，提示“allInputs.splice不是一个函数”。如果元素类型不是按钮类型，我需要从HTMLCollection中删除项目。

问题：如何从这样的集合中删除一个项目？

我可以将未删除的项目转移到一个数组中，然后使用该数组而不是原始HTMLCollection，但不确定是否有其他更短的方法来完成此操作。

Javascript代码

    var allInputs = contentElement.getElementsByTagName('input');
    for (var i = (allInputs.length - 1) ; i >= 0; i--) {
        if (allInputs[i].type !== "button") {
            allInputs.splice(i, 1);//this is throwing an error since splice is not defined
        }
    }

- Sunil

---

那个for循环中的第一个分号似乎有点不合适... - user6246005

一个原生的 HTMLCollection 不是一个数组，它没有 splice 方法，除非你实际上将元素从 DOM 中删除或添加到其中，否则无法添加或删除元素。你可能希望将其转换为数组。 - adeneo

如果您想使用Array方法（例如splice()），请将集合转换为数组；例如使用array.from(allInputs)。 - David Thomas

没有其他更短的方法。 - Felix Kling

@Sunil - 不是的，它是 Array.prototype。 - adeneo

Answer 1

你需要把它从DOM中移除，所以将以下内容替换为：

你需要把它从DOM中移除，所以将以下内容替换为：

allInputs.splice(i, 1);

随着：

allInputs[i].parentNode.removeChild(allInputs[i])

这个集合甚至与像IE 6这样的古老浏览器兼容。集合将自动更新。反向迭代集合是一个好主意，因为每次删除成员后，它会变得更短。

请注意:

[].slice.call(allInputs)

在不允许宿主对象在内置方法中使用this的浏览器（如IE8）中，将失败。

- RobG

Answer 2

HTMLCollection 是一个类似于数组的实时对象，这意味着如果您需要从这样的集合中删除元素，则必须从 DOM 中删除它。您可以始终将其克隆到数组中进行操作。

- Derek 朕會功夫

Answer 3

实际上，这是可以做到的，你只需要将想要的元素推入另一个HTMLCollection中，然后将原始集合设置为新集合（或者直接使用新集合）。

var allInputs = contentElement.getElementsByTagName('input');
var inputsWeActuallyWant = [];
for (var i = (allInputs.length - 1) ; i >= 0; i--) {
    if (allInputs[i].type === "button") {
        inputsWeActuallyWant.push(allInputs[i]);
    }
}
allInputs = inputsWeActuallyWant;

- shakyjake

Answer 4

为了从HTMLCollection中移除新创建的，我会使用下面的代码：

img.ownerDocument.images[img.index].remove()

在创建时定义了 img.index

- Leon Rom

Answer 5

你也可以使用 Array.splice。然而，HTMLCollection 的 length 属性是只读的，因此为了使用像 splice 这样的数组方法，你必须事先明确地将其设置为可写：

Object.defineProperty(allInputs, 'length', {
  writable: true
})
Array.prototype.splice.call(allInputs, i, 1)

- Fanyo SILIADIN

Answer 6

使用

 var allInputs = contentElement.getElementsByTagName('input');
 let newArr = []
 let i = 0;
 while(i<allInputs.length){
       //Add Your Filter Here
        if (allInputs[i].type !== "button") {
              //skip this Item
              i++;
        }else{
             //add it
             newArr.push(allInputs[i])
             //code..
             i++;
        }
 }

你的新列表是 newArr :)

之后你可以使用 newArr.forEach(function(el){//在这里编写代码})。

- Khaled Developer