Как удалить элемент из HTMLCollection?

Question

У меня есть код Javascript для удаления элемента из HTMLCollection, как в коде ниже. Я получаю сообщение об ошибке при вызове сплайсинга, который говорит: 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]) 

, который совместим wilth даже древние браузеры, такие как IE 6. Коллекция будет обновляться автоматически. Итерация по коллекции в обратном порядке - это хорошая идея, так как каждый раз, когда вы удаляете участника, он становится короче.

Обратите внимание, что:

[].slice.call(allInputs) 

потерпит неудачу в браузерах, как IE8, которые не позволяют объекты хоста быть это в встроенных методов.

Answer 3

Чтобы удалить вновь созданные IMG из HTMLCollection изображений я Uset следующую строку

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

где img.index был определен по созданию

Answer 4

вы также можете использовать метод сращивания массива, и помните, что свойство длины коллекции читается. Только так вы должны явно сделать его доступным для записи до сращивания:

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