/    Sign up×
Community /Pin to ProfileBookmark

Problem removing Nodes

Copy linkTweet thisAlerts:
Jan 10.2007

I’m dynamically adding nodes and need to remove them. The removing is causing problems.

This is my code

for(var x = 0; x < Node.childNodes.length; x++)
{
alert(“Removing ” + Node.childNodes[x].nodeName);
Node.removeChild(Node.childNodes[x]);
}

The funny thing is it only removes 4 nodes and I have counted and checked the source code there are more than 4 ndoes. The fact that some are left behind is causing me trouble. Can anyone tell me what is wrong with this code?

The nodes appear to be added and interpreted correctly (node.appendChild(newNode), basic stuff)

But they are not all being removed correctly. Can anyone help me diagnose the problem?

P.S.
I noticed that the first removal extracts a #text node from the parent node. Could that be signifigant? The #text is an empty node with no text actually inside of it seems to just have an empty space to cover the “innerText” of the parent tag.

Thanks for your help

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooJan 10.2007 — You are changing the order of the nodelist-you are removing nodes as you iterate through the loop-

this shifts the remaining nodes towards the beginning of the list, but your index is always increasing.

to remove all the childNodes of an element in a for loop, start from the far end,or do something like this:

//(who is an element)

while(who.lastChild) who.removeChild(who.lastChild);
Copy linkTweet thisAlerts:
@darkling235authorJan 11.2007 — Oh i get it.

Would

while(numberofnodes>0)

remove.firstChild

work?
Copy linkTweet thisAlerts:
@darkling235authorJan 11.2007 — Ok that worked. Thanks a lot.
Copy linkTweet thisAlerts:
@samanyoluJan 11.2007 — I use hasChildNodes()
<br/>
&lt;button onclick="removeChildNodes()"&gt;click me &lt;/button&gt;

&lt;div id="col2"&gt;&lt;h2&gt;text&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/p&gt;&lt;img id="img1" src="# height="120" width="120" /&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;

function removeChildNodes() {
var col2 = document.getElementById("col2");

while(col2.hasChildNodes()) {

col2.removeChild(col2.childNodes[0]) ;

}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@darkling235authorJan 11.2007 — Ok thanks that helped a lot
×

Success!

Help @darkling235 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...