如何从 HTMLCollection 中删除一个项目？

Question

我有一些 Javascript 代码可以从 HTMLCollection 中删除一个项目，如下面的代码所示。调用 splice 时出现错误：allInputs.splice is not a function。如果元素类型不是按钮类型，我需要从 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
        }
    }

Answer 1

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

Answer 2

您需要将其从 DOM 中删除，因此替换为：

allInputs.splice(i, 1);

与：

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

甚至与 IE 6 等古老的浏览器兼容。该集合将自动更新。反向遍历集合是个好主意，因为每次删除成员时，它都会变短。

注意：

[].slice.call(allInputs)

在 IE8 等不允许宿主对象在内置方法中是 this 的浏览器中会失败。

Answer 3

要从 HTMLCollection images 中删除新创建的 img 我会使用下一个字符串

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

其中 img.index 是在创建时定义的

Answer 4

您也可以使用 Array.splice。但是，HTMLCollections 的 length 属性是只读的，所以为了使用像 splice 这样的 Array 方法，你必须事先明确地使其可写：

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

Answer 5

这个其实是可以的，你只需要将你想要的元素push到另一个HTMLCollection中，然后将原来的collection设置为新的collection（或者直接使用新的collection）

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;

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){//code here}).

如何从 HTMLCollection 中删除一个项目？

How to remove an item from HTMLCollection?

javascript

htmlcollection