Traversing nodes correctly - javascript childNodes

Question

I am trying to make following piece of code to work for each child node once. THe function is also deleting the node as per logic, for more than one child node it never seems to traverse to each child node.

//Deleting from child node
            var target =document.getElementById(element.name).childNodes[0];            
            if(target.hasChildNodes())
            {
              var children = new Array();
              children = target.childNodes;
              for(child in children)
              {
                if(children[child].tagName == 'DIV'){
                    //target.removeChild[child];
                    var deleteChild = document.getElementById(target.childNodes[child].id);
                    deleteChild.parentNode.removeChild(deleteChild);
                }
              }
            }

In a special case i have 4 "Div" as child, this only remove two DIV and not all. I assume as the length is also changing constantly, hence it's not able to get to all children.

Is this correct way of traversal, am i missing something obvious?

Instead of explaining what you have in your description, click the <> button in the editor and SHOW what you have - add HTML and you have a minimal reproducible example - remember to have output and EXPECTED output — mplungjan
– mplungjan, Commented Feb 9, 2017 at 6:51
When using childNodes, you are also collecting textNodes, whitespaces, and even comments. Can't really tell because you haven't posted any HTML, and you are talking about traversing the DOM...that's like explaining geography without a map. — zer00ne
– zer00ne, Commented Feb 9, 2017 at 8:10

lonesomeday · Accepted Answer · 2017-02-09 08:14:03Z

3

You are exactly right: the problem is that you are using a static index when the NodeList to which you refer (target.childNodes) is live: it is updated when you remove some of those child nodes.

The simplest way to do this is to make a static list of the child nodes of the element. You seem to be trying to do this, but Javascript has dynamic typing, so var children = new Array(); essentially does nothing useful. It does not coerce the NodeList into becoming an array. The function you want is Array.from:

var children = Array.from(target.childNodes);
var child; // don't forget to declare this variable
for(child in children)
{
    if(children[child].tagName == 'DIV'){
        //target.removeChild[child];
        var deleteChild = target.childNodes[child]; // simplify
        deleteChild.parentNode.removeChild(deleteChild);
    }
}

Note that Array.from is a new-ish function, so you should provide a shim for older browsers.

edited Feb 9, 2017 at 8:14

answered Feb 9, 2017 at 7:42

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NewBee Over a year ago

thanks for the input i will try this method, seems like decreasing the length and loop counter also does the job. If anyone wondering what that means is looping with for(int i = 0; i < children.length; i++) -> decreasing the length counter as well as i by 1 every time i remove a child node.

lonesomeday Over a year ago

@NewBee No, that will not work if the last two child nodes are both div elements.

Collectives™ on Stack Overflow

Traversing nodes correctly - javascript childNodes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related