Best way of removing child nodes

[Grant Wagner]

There doesn't seem to be any mechanism to "clear" a node of all
it's children (not that its necessary very often, but I have come
across situations where I'd like to clear a node of all it's
children before appending other nodes). I've come up with two
possibilities:

function removeAllChildNodes(node) {
if (node && node.hasChildNodes && node.removeChild) {
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
}
} // removeAllChildNodes()

or

function removeAllChildNodes(node) {
if (node && node.parentNode && node.parentNode.replaceChild
&& node.cloneNode) {
node.parentNode.replaceChild(node.cloneNode(false) ,
node);
}
} // removeAllChildNodes()

Which do you like better and why? Is there an easier method or
way of clearing the children of a node that I'm missing?

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available
at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html

[Jeff Thies]

"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com...

There doesn't seem to be any mechanism to "clear" a node of all
it's children (not that its necessary very often, but I have come
across situations where I'd like to clear a node of all it's
children before appending other nodes). I've come up with two
possibilities:
I seem to recall that removeNode(true), will remove all child nodes.

Jeff

function removeAllChildNodes(node) {
if (node && node.hasChildNodes && node.removeChild) {
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
}
} // removeAllChildNodes()

or

function removeAllChildNodes(node) {
if (node && node.parentNode && node.parentNode.replaceChild
&& node.cloneNode) {
node.parentNode.replaceChild(node.cloneNode(false) ,
node);
}
} // removeAllChildNodes()

Which do you like better and why? Is there an easier method or
way of clearing the children of a node that I'm missing?

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available
at:
*
http://devedge.netscape.com/library/...3/reference/fr
ames.html
* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...l_reference_en
try.asp
* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html

[Michael Winter]

On Fri, 23 Apr 2004 22:53:32 GMT, Jeff Thies <no****@nospam.net> wrote:

"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:40***************@agricoreunited.com...

There doesn't seem to be any mechanism to "clear" a node of all
it's children (not that its necessary very often, but I have come
across situations where I'd like to clear a node of all it's
children before appending other nodes). I've come up with two
possibilities:

I seem to recall that removeNode(true), will remove all child nodes.

[snip]

There is no such method in DOM Core. The Node interface does include
removeChild(), which accepts a Node reference, but Grant already included
that in his post.

Mike
Please trim your quotes.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Ivo]

"Grant Wagner" wrote

There doesn't seem to be any mechanism to "clear" a node of all
it's children (not that its necessary very often, but I have come
across situations where I'd like to clear a node of all it's
children before appending other nodes). I've come up with two
possibilities:

function removeAllChildNodes(node) {
if (node && node.hasChildNodes && node.removeChild) {
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
}
} // removeAllChildNodes()

or

function removeAllChildNodes(node) {
if (node && node.parentNode && node.parentNode.replaceChild
&& node.cloneNode) {
node.parentNode.replaceChild(node.cloneNode(false) ,
node);
}
} // removeAllChildNodes()

Which do you like better and why?
The first is shorter, easier to read, and the use of a while loop seems
appropriate.
Is there an easier method or
way of clearing the children of a node that I'm missing?

Perhaps create an empty copy with cloneNode(false), remove the node itself
from its parent, and add the clone in its place. HTH
Ivo

[Grant Wagner]

Ivo wrote:

function removeAllChildNodes(node) {
if (node && node.parentNode && node.parentNode.replaceChild
&& node.cloneNode) {
node.parentNode.replaceChild(node.cloneNode(false) ,
node);
}
} // removeAllChildNodes()

Which do you like better and why?

Perhaps create an empty copy with cloneNode(false), remove the node itself
from its parent, and add the clone in its place. HTH
Ivo

That's what the code shown does, except it just does it all at once.

Thanks for the feedback, I've gone with the while() loop version removing
firstChild on each iteration.

--
| Grant Wagner <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html