Remove all child elements of a DOM node in JavaScript?

Question

How would I go about removing all of the child elements of a DOM node in JavaScript?

Say I have the following (ugly) HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

And I grab the node I want like so:

var myNode = document.getElementById("foo");

How could I remove the children of foo so that just <p id="foo"></p> is left?

Could I just do:

myNode.childNodes = new Array();

or should I be using some combination of removeElement?

I'd like to keep this answer to straight up DOM if possible, though if you supplement your answer with jQuery I'd be more amenable to accepting your answer :).

Answer 1

Option 1:

var myNode = document.getElementById("foo");
myNode.innerHTML = '';

Option 2:

var myNode = document.getElementById("foo");
while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
}

Answer 2

Hello,

with jQuery :

$("#foo").find("*").remove();

Answer 3

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

---

If there's any chance that you have jQuery affected descendants, then you must use some method that will clean up jQuery data.

$('#foo').empty();

The jQuery .empty() method will ensure that any data that jQuery associated with elements being removed will be cleaned up.

If you simply use DOM methods of removing the children, that data will remain.

Answer 4

In jQuery:

$('#foo').empty();

Answer 5

If you only want to have the node without it's children you could also make a copy of it like this:

var dupNode = document.getElementById("foo").cloneNode(false);

Depends on what you're trying to achieve.