ansaurus

Question

How to use getElementsByTagName() to find all nested elements?

Answer 1

A:

change your code to

var nodes = document.body.getElementsByTagName('a');
for (var i = 0; nodes.length > 0; i++) {
    var node = nodes[0];
    node.parentNode.removeChild(node);    
}

nodes.length gets evaluated everytime you remove a child.

Vinay B R 2010-09-24 02:56:22

Even if nodes.length does get evaluated every time, why does `node.parentNode.removeChild(node)` actually remove it from the array, as opposed to just from the DOM node?

Jamie Wong 2010-09-24 03:00:32

@Wong try debugging the original script, you will understand what i mean by reevaluated. as to y it happens you can look into any article on javascript best practices for an explaination.

Vinay B R 2010-09-24 05:01:54

Answer 2

+1 A:

Following Vinay's answer:

var nodes = document.body.getElementsByTagName('a');
while(nodes.length > 0) {
  nodes[0].parentNode.removeChild(nodes[0]);
}

Since using a for loop like that is bizarre if you aren't actually using the iterator for anything.

Jamie Wong 2010-09-24 02:59:49

Actually I am using it in my code; the snippet I pasted was the smallest subset of my code that reproduced the problem.

Duncan Bayne 2010-09-24 03:02:06

Answer 3

+1 A:

Capture the length and remove in reverse order. This will eliminate side effects.

var nodes = document.body.getElementsByTagName('a');

for (var J=nodes.length-1;  J >= 0;  J--) //-- Kill the last, first, to avoid orphan problems.
{
    var node    = nodes[J];
    if (node)
    {
        node.parentNode.removeChild (node);
    }
}

But a better way...
Add this directive to your header:

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Then your whole code becomes:

$("a").remove ();

Brock Adams 2010-09-24 03:05:32

ansaurus

tags:

views:

answers:

How to use getElementsByTagName() to find all nested elements?

related questions