Matt RaibleMatt Raible is a Web Architecture Consultant specializing in open source frameworks.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

JavaScript: removeChild HOWTO

I experienced a small issue this morning when trying to remove all the children from a <td> using the following:

// cells[i] is a td in a table
var kids = cells[i].childNodes;
for (j=0; j < kids.length; j++) {
    cells[j].removeChild(kids[j]);
}

This (for some reason) doesn't work. So, in the interest of helping others and getting picked up by Google, here's the solution (actually found via Google).

while (cells[i].childNodes[0]) {
    cells[i].removeChild(cells[i].childNodes[0]);
}

HTH!

Posted in The Web at Jun 10 2003, 10:38:38 AM MDT 8 Comments
Comments:

I recall running into this once before, and IIRC it also works if you iterate backwards:
<code>for (j=kids.length; j >= 0; j--) ....</code>
or something like that.

Posted by Lance on June 10, 2003 at 12:20 PM MDT #

thanks! you saved my day!

Posted by 216.208.134.99 on November 23, 2004 at 01:23 PM MST #

You do know the reason the first bit of code doesn't work, right?

As you remove things from the beginning, the length of the array remains the same, but the number of items that actually exits decreases. So let's say you have a div with 3 spans inside it - call them A, B, and C - here's what will happen with the first script:

j = 0 Remove 0th span, A kids is still the same now there are only 2 spans, B and C

j = 1 Remove 1st span This is really span C, because all information has been moved back one kids is still the same now there's only one span, C

j = 2 Remove the 2nd span This causes the error. You there's nothing to remove at the second span. It's already gone. You're trying to remove C which is at 0, not at 2.

So you can go backwards as said before, or continuously remove from the 0th position until there's nothing left. Just in case you cared.

Posted by laxwy on July 16, 2005 at 09:31 PM MDT #

Or you could just use the handy <code>lastChild</code> property. That way you will always be at the end of the kids array. <code>cells[i].removeChild(cells[i].lastChild);</code>

Posted by Jude on October 03, 2005 at 06:48 PM MDT #

Thanks! That's exactly what I needed to know. (and thanks to Google too...)

Posted by Stewart Johnson on April 02, 2006 at 08:37 AM MDT #

You could also just do this: while( node.hasChildNodes() ) { node.removeChild( node.getFirstChild() ); }

Posted by Julian Harris on July 13, 2006 at 10:39 AM MDT #

So, just put a big idiot sign on my forehead for the comment above -- it looks like it should work but it too doesn't.

Posted by Julian on July 13, 2006 at 11:27 AM MDT #

i was strugling with this as well::: 2 days. the best solution i found is---

function deleteNode(element){
  var label=document.getElementById(elementId);	
  while( label.hasChildNodes() ) { label.removeChild( label.lastChild ); }
}

for bether compatibility u must always use 'getElementById'

Posted by papasound on July 28, 2006 at 02:46 AM MDT #

Post a Comment:
Comments are closed for this entry.