2

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?

NewBee
  • 839
  • 7
  • 18
  • 42
  • 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 [mcve] - remember to have output and EXPECTED output – mplungjan Feb 09 '17 at 06:51
  • When using [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes#Notes), 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 Feb 09 '17 at 08:10

1 Answers1

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.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • 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. – NewBee Feb 09 '17 at 07:49
  • @NewBee No, that will not work if the last two child nodes are both `div` elements. – lonesomeday Feb 09 '17 at 08:14