Supprimer tous les éléments enfants d'un nœud DOM en JavaScript ?

Question

Comment faire pour supprimer tous les éléments enfants d'un nœud DOM en JavaScript ?

Disons que j'ai le HTML suivant (laid) :

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

Et je prends le noeud que je veux comme ça :

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

Comment pourrais-je supprimer les enfants de foo de sorte que juste <p id="foo"></p> reste ?

Je pourrais juste le faire :

myNode.childNodes = new Array();

ou devrais-je utiliser une combinaison de removeElement ?

J'aimerais que la réponse soit directement DOM ; mais des points supplémentaires si vous fournissez également une réponse en jQuery avec la réponse DOM uniquement :)

Answer 1

Option 1 (beaucoup plus lente, voir les commentaires ci-dessous) :

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

Option 2 (beaucoup plus rapide) :

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

Answer 2

La réponse actuellement acceptée est fausse en ce qui concerne innerHTML qui est plus lent (au moins dans IE et Chrome), comme m93a l'a correctement mentionné.

    var cNode = node.cloneNode(false);
    node.parentNode.replaceChild(cNode ,node);

et

    node.innerHtml = ''

sont comparativement rapides (de 2 à 10 fois plus rapides que les autres méthodes selon mon benchmark), et innerHTML ne détruira pas vos gestionnaires d'événements et ne perturbera pas les références jquery. il est également recommandé comme solution ici : https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

La méthode de manipulation du DOM la plus rapide (mais toujours plus lente que les deux précédentes) est la suppression des plages, mais celles-ci ne sont pas prises en charge avant IE9.

    var range = document.createRange();
    range.selectNodeContents(node);
    range.deleteContents();

Les autres méthodes mentionnées semblent être comparables, mais beaucoup plus lentes que innerHTML, à l'exception de la méthode aberrante, jquery, qui est considérablement plus lente que tout le reste :

    $(node).contents().remove();

Les preuves sont ici :

http://jsperf.com/innerhtml-vs-removechild/167

Tous les liens jsperf que j'ai vérifiés dans cette réponse ne donnaient pas les résultats escomptés. Détails sur la page jsperf.

Answer 3

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

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

---

S'il y a une chance que vous ayez des descendants affectés par JQuery, alors vous doit utiliser une méthode qui nettoie les données jQuery.

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

Le jQuery .empty() méthode garantira que toutes les données que jQuery a associées aux éléments supprimés seront nettoyées.

Si vous utilisez simplement DOM méthodes de suppression des enfants, ces données resteront.

Answer 4

Si vous utilisez jQuery :

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

Si vous ne le faites pas :

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

Answer 5

Le plus rapide...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Merci à Andrey Lushnikov pour son lien vers jsperf.com (site cool !).