NodeList 数据没有被删除答案

【问题标题】：NodeList Data is not getting removedNodeList 数据没有被删除
【发布时间】：2018-05-01 23:28:09
【问题描述】：

我有一个包含 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();
}

它只删除一个元素。

【问题讨论】：

这是一个 dom 元素的数组吗？
@charlietfl 是的，我从 xml 中获取了数组。
这是我用的stackoverflow.com/questions/5767325/…
提供minimal reproducible example。显示的内容应该有效
这不是一个可运行的例子

标签： javascript nodelist xmlnodelist

【解决方案1】：

数组没有函数remove。你可以像myArray.splice(1)一样使用Array#splice；

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

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

如果要删除的不是第一项，需要获取搜索到的item的索引，传入splicelike

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);

【讨论】：

没有得到splice的选项
Array 没有名为 remove 的函数。 Splice 接受和index and count，表示index 开始删除和count - 要删除多少项目。如果count 未通过，则删除直到结束。 splice 也会影响当前数组。
如果要删除第一项，里面有什么数据没有区别
问题是关于 Nodelist 而不是常规数组。因此splice & filter 的方法在这里不适用。
标题是Array。它是 xml 而不是 NodeList

【解决方案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>

【讨论】：

错误是什么？我猜是因为 IE 不支持node.remove()；假设这是问题，我已经更新了答案
让我试试这个。

【解决方案3】：

JavaScript NodeList 与 JavaScript Array 的工作方式不同，而您所拥有的是 NodeList。当你从 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>

上述 sn-p 的 for 循环在 i < dataNodes.length 时进行迭代，但不会增加 i，因此对于 dataNodes.length 迭代，i 始终是 0。这样，每次迭代都会从dataNodes 中删除索引0。在控制台中，您可以看到，通过从 DOM 中删除 node，您也将其从 dataNode NodeList 中删除：

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

【讨论】：