Removing all child nodes from an element May03 '07

Feedback

# (1 of 11): Jay » prall.net

1 week, 3 days after the fact. (Sun 13 May 2007, 1:33 PM CST)

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

# (2 of 11): Rjarl » rjarl.com

1 month after the fact. (Fri 08 Jun 2007, 6:20 AM CST)

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

Previous comment Return to entry

# (3 of 11): Brad Kemper

1 month after the fact. (Fri 08 Jun 2007, 8:09 PM CST)

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

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

Previous comment Return to entry

# (4 of 11): Bob

2 months, 1 week after the fact. (Sat 14 Jul 2007, 11:21 AM CST)

You can actually cut it down even more

while(cell.hasChildNodes()) cell.removeChild(cell.firstChild);

very useful to know this though

Previous comment Return to entry

# (5 of 11): Carlos

5 months, 1 week after the fact. (Mon 08 Oct 2007, 8:03 PM CST)

Thanks much. If you want to remove all but the first child (or first n children), you can use:

if (cell.hasChildNodes()) while (cell.childNodes.length > n) cell.removeChild(cell.childNodes[cell.childNodes.length-1]);

Previous comment Return to entry

# (6 of 11): Gublooo

7 months after the fact. (Sun 02 Dec 2007, 10:18 PM CST)

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 bro

Previous comment Return to entry

# (7 of 11): Viji

7 months, 3 weeks after the fact. (Thu 27 Dec 2007, 6:17 AM CST)

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

Previous comment Return to entry

# (8 of 11): Dj

10 months, 1 week after the fact. (Wed 12 Mar 2008, 4:02 AM CST)

Thanx Dude..

Previous comment Return to entry

# (9 of 11): Devin

12 months after the fact. (Mon 28 Apr 2008, 11:32 PM CST)

This might be better:

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

while ( cell.hasChildNodes() ) { cell.removeChild( cell.firstChild );
}

Previous comment Return to entry

# (10 of 11): Jock Meston

1 year, 1 month after the fact. (Thu 05 Jun 2008, 8:07 AM CST)

instead of:

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

wouldn't

while ( cell.hasChildNodes() )
{
    cell.removeChild( cell.firstChild );       
}

do it more succinctly?

Previous comment Return to entry

# (11 of 11): Darby Magill

1 year, 1 month after the fact. (Fri 13 Jun 2008, 10:46 PM CST)

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 thought I'd share it back with you.

I wanted to delete only certain children, not all. so refering to firstchild didn't work for me. Also I added a parameter of name of object for which you want to delete the children. Finally, I only am removing those that have a name (not undefined). Oh I'm throwing in my alertObject function because I use it in the other one.

function removeChildren(s){ var bDebug=true; var o = document.getElementById(s); var oi; var i; if (o){ if (bDebug==true) {alert('got o');} if ( o.hasChildNodes() ) { if (bDebug==true) {alert('has' +o.childNodes.length + ' children');} if (o.childNodes.length >= 1 ) { for (i=0;i<=o.childNodes.length;i=i+1) { oi = o.childNodes[i]; if (oi.name != undefined) { if (bDebug==true) {alertObject('removing: ' +oi.name);} // o.removeChild(oi); } } } } } }

function alertObject(o){ var sLength=""; if (o.length != undefined){ if (typeof o == 'string'){ sLength = " Number of elements: 1"; } else{ sLength = " Number of elements:" + o.length; }
} var sMsg = "Object name: " + o.name; sMsg = sMsg + " Type: " + typeof o; sMsg = sMsg + " Type: " + o.type; sMsg = sMsg + " id: " + o.id; sMsg = sMsg + sLength; alert (sMsg); }

To the person who mentioned succinct code... that's cool but I'd rather have code that is more readable and maintanable by others. Personal preferrence.

~Darby

Previous comment Return to entry

RSS feed for comments on this post

Leave feedback

Feedback

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

Status

Sub-status

Your info

Return to entry.

It's often useful to remove all child nodes from a specific element, with JavaScript.

You are at the feedback permalink page for: Removing all child nodes from an element

Read more...