Removing all child nodes from an element May03 '07

When manipulating the DOM, it's often useful to remove all child nodes from a specific element. This typically comes in handy when you're looking to replace the content of an element with a separate form element, such as an <input>, so the user can edit the actual value.

Here's an example of something I recently created that illustrates my point:

Get the Flash Player to see this player.

These "dynamic form elements" are written to the page only when the user performs a certain action; in this case: clicking on a table cell.

The HTML for the table cell could look something like this:

<td id="cell">$1.55</td>

Once the user clicks on a cell, the HTML of the cell changes to:

<td id="cell"><input type="text" value="$1.55" /></td>

This gives the user a text box with which to edit the value.

In order to do this, you'll need a quick way to remove any existing child nodes of the table cell.

There are many ways to do this in JavaScript, but I've discovered one that seems to work in all types of situations:

var cell = document.getElementById("cell");

if ( cell.hasChildNodes() )
{
    while ( cell.childNodes.length >= 1 )
    {
        cell.removeChild( cell.firstChild );       
    } 
}

No matter how many nested nodes exist, it removes them all. Quite handy.

Categories: Code , DOM , JavaScript , Tips , Video Embed

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

thanks. Just what I wanted. I used the technique in a clearElements(x) function. ... Read more.

I "LOVE" You bro!. Thank you very much, nice funcion. ... Read more.

Very nice indeed. Once you have your node (in this case "cell"), you can actually right the rest as one line: if (cell.hasChildNodes()) whi ... Read more.

You can actually cut it down even more while(cell.hasChildNodes()) cell.removeChild(cell.firstChild); very useful to know this t ... Read more.

Thanks much. If you want to remove all but the first child (or first n children), you can use: if (cell.hasChildNodes()) while (cell.childN ... Read more.

Awesome - you rock man :) - now i can sleep instead of trying to figure out a way to make this thing work and staying up all night.....thanks a lot ... Read more.

Thank you. I have referred many site.at last i have found solution with your source code ... Read more.

Thanx Dude.. ... Read more.

This might be better: var cell = document.getElementById("cell"); while ( cell.hasChildNodes() ) { cell.removeChild( ce ... Read more.

instead of: if ( cell.hasChildNodes() ) { while ( cell.childNodes.length >= 1 ) { cell.removeChild( cell.firstChild ); ... Read more.

rewrote - more generic. Hey there... thanks for getting me on the right path for what I was looking for. I changed it up a bit and thoug ... Read more.

Thank you very much ... Read more.

great script, worked first time! I've wrapped it up into a neat little function ... function stripNodes(oEle) { if ( oEle.hasCh ... Read more.

Thanks! - much nicer than el.innerHTML = ''... ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Similar Entries

Stats

5131 unique visits since August 2008

Syndicate

Advertisements