6

我有一些 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
        }
    }
4

6 回答 6

13

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

allInputs.splice(i, 1);

和：

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

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

注意：

[].slice.call(allInputs)

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

于 2016-05-18T22:52:34.950 回答
8

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

于 2016-05-18T22:25:30.227 回答
4

其实这样做是可以的，你只需要将你想要的元素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;
于 2018-10-10T13:37:25.163 回答
1

要从HTMLCollection图像中删除新创建的img ，我将使用下一个字符串

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

img.index是在创建时定义的

于 2017-05-04T10:02:38.027 回答
1

您也可以使用Array.splice. 但是，s 的length属性HTMLCollection是只读的，所以为了使用像 splice 这样的 Array 方法，您必须事先显式使其可写：

Object.defineProperty(allInputs, 'length', {
  writable: true
})
Array.prototype.splice.call(allInputs, i, 1)
于 2017-08-17T09:53:01.493 回答
0

采用

 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}).

于 2021-09-20T11:17:38.147 回答