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

876

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.

Polaris878
la source

Réponses:

1675

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>

Gabriel McAdams
la source
6
À partir de jQuery, ces deux problèmes peuvent être pris en compte: Cette méthode supprime non seulement les éléments enfants (et autres descendants), mais également tout texte dans l'ensemble des éléments correspondants. En effet, selon la spécification DOM, toute chaîne de texte dans un élément est considérée comme un nœud enfant de cet élément. ET "Pour éviter les fuites de mémoire, jQuery supprime les autres constructions telles que les gestionnaires de données et d'événements des éléments enfants avant de supprimer les éléments eux-mêmes."
jottos
104
Btw, l'utilisation de lastChild semble être un peu plus efficace jsperf.com/innerhtml-vs-removechild/15
Andrey Lushnikov
24
innerHTML ne fonctionne que si vous ne travaillez qu'avec du HTML. S'il y a par exemple SVG à l'intérieur, seul le retrait d'élément fonctionnera
stwissel
34
JAMAIS JAMAIS JAMAIS utiliser innerHTML = ''. Non. Le problème est que les éléments semblent avoir été supprimés mais en interne, les nœuds persistent et ralentissent les choses. Vous devez supprimer tous les nœuds individuels pour une raison. Testé dans Google Chrome et IE. Veuillez envisager de supprimer la "solution" innerHTML car elle est incorrecte.
Kenji
15
@vsync Je ne crois pas que le commentaire de Kenji soit bien fondé. Faire innerHTML = ''est plus lent, mais je ne pense pas que ce soit "mal". Toute allégation de fuite de mémoire doit être accompagnée de preuves.
Chris Middleton
115

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.

npjohns
la source
2
Votre jsperf est complètement cassé. Ce ne sont pas de très bonnes preuves.
bryc
4
C'est actuellement la meilleure réponse. Tout le reste dans ce fil est de la désinformation (!) Merci d'avoir nettoyé tous ces mauvais vieux tests.
Ben
6
"InnerHTML ne détruira pas vos gestionnaires d'événements ou ne gâchera aucune référence jquery". Il entraînera la jQuery.cacheperte de données , provoquant une fuite de mémoire car la seule référence disponible pour gérer ces données se trouvait sur les éléments que vous venez de détruire.
1
"InnerHTML ne détruira pas vos gestionnaires d'événements ou ne gâchera aucune référence jquery" fait référence au conteneur, pas aux enfants. cloneNodedésactive le conteneur, ce qui signifie que les références au conteneur ne sont pas conservées (jquery ou autre). Le cache de Jquery peut valoir la peine d'utiliser jquery pour supprimer des éléments si des données jquery y sont attachées. Espérons qu'ils passeront à WeakMaps à un moment donné. Le nettoyage (ou même l'existence de) $ .cache ne semble pas être officiellement documenté.
npjohns
10
Les tests jsperf sont cassés ici. Le moteur de test signale ce qui suit: "Erreur: les nœuds Dom ne sont pas recréés pendant les itérations, les résultats des tests n'auront aucun sens."
senderle
73

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

Gibolt
la source
14
La boucle for ne fonctionnera pas car parent.children / parent.childNodes sont des listes actives; l'appel de remove modifie la liste et votre itérateur n'est donc pas garanti d'itérer sur tout. Dans Chrome, par exemple, vous finissez par sauter tous les autres nœuds. Mieux vaut utiliser une while (parent.firstChild) { parent.removeChild(parent.firstChild); }boucle. developer.mozilla.org/en-US/docs/Web/API/ParentNode/children developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
qix
3
while (parent.firstChild && !parent.firstChild.remove());
Sténographie sympa
1
Un one-liner pour quand la performance n'est pas une grosse affaire:[...parent.childNodes].forEach(el => el.remove());
1
Cela ne fonctionne pas dans Typescript ... utilisez plutôtwhile (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }
John Henckel
43
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.

user113716
la source
La méthode innerHTML est de loin la plus performante. Cela dit, les données sont nettoyées par .quempt () de jquery: Élimine les données () à l'intérieur de jquery associées aux balises enfants à l'aide d'une boucle récursive (lente, mais peut réduire considérablement l'utilisation de la mémoire), Empêche les fuites de mémoire SI vous avez attaché des événements sans jquery, comme utiliser .onclick = .... Si aucun de ces événements ne doit être supprimé des enfants, la définition de innerHTML ne fuira pas. La meilleure réponse est donc - cela dépend.
Chris Moschini
1
Pourquoi ne pas simplement mettre l'expression firstChild directement dans la condition de la boucle while? while ( myNode.firstChild ) {
Victor Zamanian
while(fc = myNode.firstChild){ myNode.removeChild(fc); }
Valen
36

Si vous utilisez jQuery:

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

Si vous ne le faites pas:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
Veuillez vous lever
la source
20

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.

Gabe Halsmer
la source
Même chose sans avertissement LINT: clear: function (container) {for (;;) {var child = container.lastChild; si (! enfant) casse; container.removeChild (enfant); }}
cskwg
9

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.

DanMan
la source
3
Peut-être pourriez-vous même suivre cela avec parent.replaceChild(cloned, original)? Cela pourrait être plus rapide que de supprimer les enfants un par un et devrait fonctionner sur tout ce qui prend en charge le DOM (donc tous les types de documents XML, y compris SVG). La définition de innerHTML peut également être plus rapide que la suppression des enfants un par un, mais cela ne fonctionne que sur des documents HTML. Devrait tester cela un certain temps.
Maarten
13
Cela ne copiera pas les écouteurs d'événements ajoutés à l'aide de addEventListener.
Matthew
Si vous pouvez vivre avec cette limitation, c'est certainement rapide: jsperf.com/innerhtml-vs-removechild/137
DanMan
7

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();
}
Nathan K
la source
1
C'est intéressant mais cela semble assez lent par rapport aux autres méthodes: jsperf.com/innerhtml-vs-removechild/256
Polaris878
6
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.

bjb568
la source
Un nœud de texte n'est pas un élément
check_ca
désolé vous avez raison, il supprime en effet tous les éléments enfants
check_ca
Cela ne fonctionnera pas dans les anciennes versions d'Internet Explorer.
pwdst
4

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.

jeroen
la source
3
la pire chose qui soit. si vous remplacez le nœud d'origine par son clone, vous perdez la référence au nœud d'origine. aucun des gestionnaires d'événements et autres liaisons ne fonctionnera.
Arun Aravind
4

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()
Ado Ren
la source
J'aime cette solution! Y a-t-il une raison pour laquelle je devrais utiliser ceci en définissant innerHTML sur une chaîne vide?
TheCodenator du
performance: domEl.innerHTML = ""mauvaise et considérée comme une mauvaise pratique
Ado Ren
3

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

magicien
la source
3
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.

Henrik
la source
... parce que c'est un complexe inutile, et aucune explication n'est donnée sur la façon dont cela fonctionne (ce qui n'est en fait pas évident), je suppose.
Periata Breatta du
2

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.

Alexey
la source
5
innerTextest une chose MS propriétaire cependant. Je dis juste.
DanMan
1
Je suis presque sûr que c'est un test imparfait - il repose sur la boxdisponibilité non pas en tant que var mais via la recherche DOM basée sur id, et puisque la whileboucle effectue cet appel lent plusieurs fois, il est pénalisé.
nrabinowitz
2

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);
}
Chaitanya Bapat
la source
2

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!

Noitidart
la source
1
eh bien je pense que ce soit le plus rapide ou non, certains tests jsperf peuvent prouver les deux cas
Nikos M.
super travail merci pour ces tests. ils n'incluent pas for (var i=0...celui cependant. Mais voici ce que j'ai obtenu lorsque j'ai exécuté ces tests: i.imgur.com/Mn61AmI.png donc dans ces trois tests, firstNode était plus rapide que lastNode et innerHTML, ce qui est vraiment cool
Noitidart
j'ai ajouté les tests: jsperf.com/innerhtml-vs-removechild/220 des trucs intéressants faisant la méthode el.firstNode est le moyen le plus rapide, il semble
Noitidart
2

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.

émeu
la source
2
 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }
Thomas
la source
1
Veuillez expliquer en réponse ce que fait votre code?
Nirav Joshi
1
Son explication
blacksheep
1

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]);
}
r00t hkr
la source
1

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.
Neelansh Verma
la source
Veuillez expliquer vos lignes de code afin que les autres utilisateurs puissent comprendre ses fonctionnalités. Merci!
Ignacio Ara
@IgnacioAra Done!
Neelansh Verma
1

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.

Harry Chilinguerian
la source
1
En fait, il semble qu'il ait été mentionné ici stackoverflow.com/a/15441725/576767
Félix Gagnon-Grenier
Félix j'ai dû manquer ça, merci pour la correction +1.
Harry Chilinguerian
1

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.

Dolph Roger
la source
0

Autres façons dans jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();
Anoop
la source
Vote négatif car OP dit que les réponses dans le DOM simple sont préférées.
bwindels
En outre, jQuery a une .empty()méthode, $("#foo").empty()serait tout simplement suffisant
YakovL
-1

simplement IE:

parentElement.removeNode(true);

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

user2656596
la source
1
C'EST À DIRE? C'est le 21e siècle!
everlasto
-1

La façon la plus simple:

let container = document.getElementById("containerId");
container.innerHTML = "";
milosz
la source
Pendant que cela fonctionne, attention à ce container.innerHTML = nullque Internet Explorer affiche le texte null. Donc, cela n'enlève pas vraiment les enfants, je dirais.
Arjan
-1

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!

Mohit Karkar
la source
dans la solution avant tout, aucun code ne supprime la <span>balise
Mohit Karkar
-3

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.

Bjathr
la source
-4

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 ="";

})
Ir Calif
la source
-9

avec jQuery:

$("#foo").find("*").remove();
Arnaud F.
la source
4
$('#foo').children().remove()beaucoup plus logique
Krzysztof Dąbrowski