NodeList 数据未被删除

Question

我有一个包含 3 个对象的数组对象。我想删除除第一个对象之外的所有对象。

这是我从 XML:

获得的数据

mrArr[0] = <Data>
                <G> "Val" = "5" </G>
           </Data>  
mrArr[1] = <Data>
                <G> "Val" = "6" </G>
           </Data>
mrArr[2] = <Data>
                <G> "Val" = "7" </G>
           </Data>

我创建了一个循环来尝试执行此操作，但它只删除了一个元素。我的循环有什么问题？：

for(var i = 1; i < myArr.length; i++){
    myArr[i].remove();
}

它只删除了一个元素。

Answer 1

数组没有函数remove。您可以像 myArray.splice(1);

这样使用 Array#splice

const myArray = [1, 2, 3];
console.log(myArray);

myArray.splice(1);
console.log(myArray);

如果要删除的不是第一项，则需要获取搜索到的项的索引并传入splice like

const myArray = [1, 2, 3];
const index = myArray.indexOf(2);
myArray.splice(index, 1);

console.log(myArray);

或者只使用 Array#filter 并传递谓词

const myArray = [1, 2, 3];
const filteredArray = myArray.filter(item => item !== 2);

console.log(filteredArray);

Answer 2

由于您在每次迭代后改变数组，array.length 不断减少。因此，在您的示例中，循环仅执行一次，从而仅删除一个元素。

这是您要实现的目标的工作示例。

var nodes = document.getElementsByTagName('div');

console.log('Before removal:', nodes);

while (nodes.length > 1) {
  var node = nodes[nodes.length - 1];
  node.parentNode.removeChild(node);
}

console.log('After removal:', nodes);

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<div id="div-03">Here is div-03</div>

Answer 3

A JavaScript NodeList works differently than a JavaScript Array 而你所拥有的是 NodeList。当您 delete/remove 来自 DOM 的节点时，它也会从保留它的任何 NodeList 中删除。因此，您需要迭代 NodeList 的 .length 但您不希望您的递增表达式实际递增：

dataNodes = document.getElementsByTagName("Data");
count = 0; // debug
for (i = 0; i < dataNodes.length; i) {
  console.log('Iteration #',++count,':',dataNodes); // debug
  dataNodes[i].parentNode.removeChild(dataNodes[i]);
}

<Data><G>"Val"="5"</G></Data>
<Data><G>"Val"="6"</G></Data>
<Data><G>"Val"="7"</G></Data>

上面代码段的 for 循环在 i < dataNodes.length 时迭代，但不会增加 i 所以 i for dataNodes.length 迭代总是 0。这样，它会在每次迭代时从 dataNodes 中删除索引 0。在控制台中，您可以通过从 DOM 中删除 node 来看到您 也将其从 dataNode NodeList 中删除：

Iteration # 1 : (3) [data, data, data]
Iteration # 2 : (2) [data, data]
Iteration # 3 : [data]

NodeList 数据未被删除

NodeList Data is not getting removed

javascript

nodelist

xmlnodelist