NodeList Data is not getting removed

Question

I have an array object which has 3 objects. I want to remove all the objects except the first one.

Here is my data which I got from 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>

I have created a loop to try and do this but it is only removing one element. What is wrong with my loop?:

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

It is removing only one element.

This is what I used https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript — tk0221, Nov 18 '17 at 06:44
You said only one is removed and can you make fiddle showing that? — artgb, Nov 18 '17 at 06:52

Nikhil Fadnis · Accepted Answer · 2017-11-21T07:05:08.920

4

Since you're mutating the array after every iteration, array.length keeps decreasing. Hence, in your example, the loop gets executed only once, thereby removing only one element.

Here's a working example of what you're trying to achieve.

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>

edited Nov 21 '17 at 07:05

answered Nov 18 '17 at 07:03

Nikhil Fadnis

810
5
7

what's the error? I'm guessing its because `node.remove()` isn't supported in IE; I've updated the answer assuming that's the issue – Nikhil Fadnis Nov 21 '17 at 07:06
Let me try this. – David Nov 21 '17 at 09:06

Suren Srapyan · Answer 2 · 2017-11-18T06:53:02.307

3

Array does not have a function remove. You can use Array#splice like myArray.splice(1);

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

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

If you want to remove not the first item, you need to get the index of the searched item and pass into the splice like

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

console.log(myArray);

or just use Array#filter and pass the predicate

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

console.log(filteredArray);

edited Nov 18 '17 at 06:53

answered Nov 18 '17 at 06:40

Suren Srapyan

57,890
10
97
101

Not getting an option of `splice` – David Nov 18 '17 at 06:40
Array does not have a function called `remove`. `Splice` accepts and `index and count`, means the `index` starting from to remove and `count` - how many items to remove. If `count` is not passed, it removes till to the end. `splice` also affects the current array. – Suren Srapyan Nov 18 '17 at 06:42
If you want to remove the first item, there is no difference what data is in it – Suren Srapyan Nov 18 '17 at 06:58
1

The question is with regard to a `Nodelist` and not a regular array. Hence the methods `splice` & `filter` are not applicable here. – Nikhil Fadnis Nov 18 '17 at 07:14
Title is saying `Array`. And it is an `xml` not NodeList – Suren Srapyan Nov 18 '17 at 07:16
The title is misleading, but the comment here specifies its an list of dom nodes. https://stackoverflow.com/questions/47363310/array-data-is-not-getting-remove/47363315#comment81679493_47363310 – Nikhil Fadnis Nov 18 '17 at 07:24

score 0 · Answer 3 · answered Nov 21 '17 at 19:08

A JavaScript NodeList works differently than a JavaScript Array and what you have there is a NodeList. When you delete/remove a node from DOM, it is also removed from any NodeList that retains it. Therefore you need to iterate the .length of your NodeList but you don't want your increment expression to actually increment:

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>

The above snippet's for loop iterates while i < dataNodes.length but doesn't increment i so i for dataNodes.length iterations is always 0. This way it removes index 0 from the dataNodes for every iteration. In the console, you can see by removing the node from DOM you are also removing it from the dataNode NodeList:

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

NodeList Data is not getting removed

3 Answers3