Raible Designs

Matt Raible is a Web Developer and Java Champion. Connect with him on LinkedIn.

The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

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.

TWITTER

Follow @mraible on Twitter

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 #

Raible Designs

10+ YEARS

TWITTER

RECENT ENTRIES

Tag Cloud

JavaScript: removeChild HOWTO