Comment pourrais-je supprimer tous les éléments enfants d'un nœud DOM en JavaScript?

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

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

Et j'attrape le nœud que je veux comme ça:

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

Comment pourrais-je retirer les enfants de foosorte qu'il ne <p id="foo"></p>reste que?

Puis-je simplement 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 dans jQuery avec la réponse DOM uniquement.

Option 1 A: compensation innerHTML.

• Cette approche est simple, mais peut ne pas convenir aux applications hautes performances car elle invoque l'analyseur HTML du navigateur (bien que les navigateurs puissent optimiser dans le cas où la valeur est une chaîne vide).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

Option 1 B: compensation textContent

• Comme ci-dessus, mais utilisez .textContent. Selon MDN, cela sera plus rapide que dans la innerHTMLmesure où les navigateurs n'invoqueront pas leurs analyseurs HTML et remplaceront immédiatement tous les enfants de l'élément par un seul #textnœud.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

Option 2 A: Boucle pour supprimer tous les lastChild:

• Une modification antérieure de cette réponse a été utilisée firstChild, mais elle est mise à jour pour être utilisée lastChildcomme en informatique, en général , il est beaucoup plus rapide de supprimer le dernier élément d'une collection que de supprimer le premier élément (selon la façon dont la collection est implémentée ).
• La boucle continue de rechercher firstChild juste au cas où il serait plus rapide de vérifier firstChildque lastChild(par exemple, si la liste d'éléments est implémentée en tant que liste liée dirigée par l'UA).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

Option 2 B: Boucle pour supprimer tous les lastElementChild:

• Cette approche préserve tous les enfants non Element(à savoir les #textnœuds et <!-- comments -->) du parent (mais pas leurs descendants) - et cela peut être souhaitable dans votre application (par exemple, certains systèmes de modèles qui utilisent des commentaires HTML en ligne pour stocker des instructions de modèle).
• Cette approche n'a été utilisée que ces dernières années, car Internet Explorer n'a ajouté que la prise lastElementChilden charge dans IE9.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

Bonus: Element.clearChildrenpatch de singe:

• Nous pouvons ajouter une nouvelle propriété de méthode au Elementprototype en JavaScript pour simplifier son invocation à juste el.clearChildren()(où elest n'importe quel objet d'élément HTML).
• (À strictement parler, il s'agit d'un patch de singe, pas d'un polyfill, car ce n'est pas une fonctionnalité DOM standard ou une fonctionnalité manquante. Notez que le patch de singe est à juste titre déconseillé dans de nombreuses situations.)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

La réponse actuellement acceptée est erronée d' innerHTMLêtre plus lent (au moins dans IE et Chrome), comme m93a l'a correctement mentionné.

Chrome et FF sont considérablement plus rapides à l'aide de cette méthode (qui détruira les données jquery jointes):

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

dans une seconde éloignée pour FF et Chrome, et le plus rapide dans IE:

node.innerHTML = '';

InnerHTML ne détruira pas vos gestionnaires d'événements ou ne cassera 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 DOM la plus rapide (toujours plus lente que les deux précédentes) est la suppression de la plage, mais les plages ne sont pas prises en charge avant IE9.

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

Les autres méthodes mentionnées semblent comparables, mais beaucoup plus lentes que innerHTML, à l'exception de la valeur aberrante, jquery (1.1.1 et 3.1.1), qui est considérablement plus lente que toute autre chose:

$(node).empty();

Preuve ici:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (Nouvelle URL pour le redémarrage de jsperf car la modification de l'ancienne URL ne fonctionne pas)

La «boucle par test» de Jsperf est souvent comprise comme «par itération», et seule la première itération a des nœuds à supprimer, donc les résultats n'ont aucun sens, au moment de la publication, il y avait des tests dans ce thread mal configurés.

Utilisez Javascript moderne, avec remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

Il s'agit d'une nouvelle façon d'écrire la suppression de nœuds dans ES5. Il est vanilla JS et se lit beaucoup mieux que les versions précédentes.

La plupart des utilisateurs devraient avoir des navigateurs modernes ou vous pouvez les transpiler si nécessaire.

Prise en charge du navigateur - 95% déc.2019

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, vous devez utiliser une méthode qui nettoiera les données jQuery.

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

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

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

Si vous utilisez jQuery:

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

Si vous ne le faites pas:

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

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 sympa!).

EDIT: pour être clair, il n'y a pas de différence de performances dans Chrome entre firstChild et lastChild. La première réponse montre une bonne solution pour les performances.

Si vous souhaitez uniquement avoir le nœud sans ses enfants, vous pouvez également en faire une copie comme ceci:

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

Cela dépend de ce que vous essayez de réaliser.

Voici une autre approche:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

C'est comme innerText, sauf standard. C'est un peu plus lent que removeChild(), mais il est plus facile à utiliser et ne fera pas beaucoup de différence de performance si vous n'avez pas trop de choses à supprimer.

En réponse à DanMan, Maarten et Matt. Le clonage d'un nœud, pour définir le texte est en effet un moyen viable dans mes résultats.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

Cela fonctionne également pour les nœuds qui ne se trouvent pas dans le dom et qui renvoient null lorsqu'ils tentent d'accéder au parentNode. De plus, si vous devez être sûr qu'un nœud est vide avant d'ajouter du contenu, cela est vraiment utile. Considérez le cas d'utilisation ci-dessous.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

Je trouve cette méthode très utile lors du remplacement d'une chaîne à l'intérieur d'un élément, si vous n'êtes pas sûr de ce que le nœud contiendra, au lieu de vous inquiéter comment nettoyer le gâchis, recommencez à zéro.

Voici ce que je fais habituellement:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

Et voila, plus tard, vous pouvez vider n'importe quel élément dom avec:

anyDom.empty()

Il existe deux options pour y parvenir:

Le plus rapide ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Alternatives (plus lentes):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Benchmark avec les options suggérées

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

Cela supprimera tous les nœuds de l'élément.

innerText est le gagnant! http://jsperf.com/innerhtml-vs-removechild/133 . Lors de tous les tests précédents, le dom interne du nœud parent a été supprimé lors de la première itération, puis innerHTML ou removeChild lorsqu'il était appliqué à div vide.

Moyen le plus simple de supprimer les nœuds enfants d'un nœud via Javascript

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

j'ai vu des gens faire:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

alors quelqu'un a dit que l'utilisation el.lastNodeest plus rapide

mais je pense que c'est le plus rapide:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

Qu'est-ce que tu penses?

ps: ce sujet m'a sauvé la vie. mon addon firefox a été rejeté car j'ai utilisé innerHTML. C'est une habitude depuis longtemps. alors je trouve ça. et j'ai remarqué une différence de vitesse. lors du chargement, le innerhtml a mis un certain temps à se mettre à jour, mais en passant par addElement son instant!

L'utilisation d'une boucle de plage me semble la plus naturelle:

for (var child of node.childNodes) {
    child.remove();
}

Selon mes mesures dans Chrome et Firefox, il est environ 1,3 fois plus lent. Dans des circonstances normales, cela n'aura peut-être pas d'importance.

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

En règle générale, JavaScript utilise des tableaux pour référencer les listes de nœuds DOM. Donc, cela fonctionnera bien si vous avez un intérêt à le faire via le tableau HTMLElements. En outre, il convient de noter, car j'utilise une référence de tableau au lieu de proto JavaScript, cela devrait fonctionner dans n'importe quel navigateur, y compris IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

Pourquoi ne suivons-nous pas la méthode la plus simple ici "supprimer" en boucle à l'intérieur de while.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• Sélection du div parent
• Utilisation de la méthode "remove" dans une boucle While pour éliminer le premier élément enfant, jusqu'à ce qu'il n'en reste plus.

Je viens de voir quelqu'un mentionner cette question dans une autre et j'ai pensé ajouter une méthode que je ne voyais pas encore:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

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

La fonction clear prend l'élément et utilise le nœud parent pour se remplacer par une copie sans ses enfants. Pas beaucoup de gain de performances si l'élément est clairsemé mais lorsque l'élément a un tas de nœuds, les gains de performances sont réalisés.

Approche fonctionnelle uniquement:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

"childNodes" dans domChildren donnera une nodeList des éléments enfants immédiats, qui est vide quand aucun n'est trouvé. Afin de mapper sur la nodeList, domChildren le convertit en tableau. domEmpty mappe une fonction domRemove sur tous les éléments qui la supprime.

Exemple d'utilisation:

domEmpty(document.body)

supprime tous les enfants de l'élément corps.

Autres façons dans jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

simplement IE:

parentElement.removeNode(true);

true - signifie faire un retrait profond - ce qui signifie que tous les enfants sont également retirés

La façon la plus simple:

let container = document.getElementById("containerId");
container.innerHTML = "";

utilisation simple et rapide de la boucle !!

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

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

cela ne fonctionnera pas dans la <span>balise!

Si vous voulez y remettre quelque chose div, innerHTMLc'est probablement mieux.

Mon exemple:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

Si j'utilise la méthode .firstChildou .lastChildla displayHTML()fonction ne fonctionne pas par la suite, mais aucun problème avec la .innerHTMLméthode.

Ceci est un pur javascript je n'utilise pas jQuery mais fonctionne dans tous les navigateurs même IE et il est très simple à comprendre

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

avec jQuery:

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