Come farei per rimuovere tutti gli elementi figlio di un nodo DOM in JavaScript?

Supponiamo di avere il seguente (brutto) HTML:

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

E afferro il nodo che voglio così:

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

Come potrei rimuovere i bambini in foomodo che <p id="foo"></p>sia rimasto solo?

Potrei semplicemente fare:

myNode.childNodes = new Array();

o dovrei usare una combinazione di removeElement?

Vorrei che la risposta fosse semplice DOM; tuttavia punti extra se fornisci anche una risposta in jQuery insieme alla risposta solo DOM.

Opzione 1 A: Cancellazione innerHTML.

• Questo approccio è semplice, ma potrebbe non essere adatto ad applicazioni ad alte prestazioni perché richiama il parser HTML del browser (sebbene i browser possano ottimizzare nel caso in cui il valore sia una stringa vuota).

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>

Opzione 1 B: Cancellazione textContent

• Come sopra, ma usa .textContent. Secondo MDN questo sarà più veloce di innerHTMLquanto i browser non invochino i loro parser HTML e sostituiranno immediatamente tutti i figli dell'elemento con un singolo #textnodo.

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>

Opzione 2 A: loop per rimuovere ogni lastChild:

• È stata utilizzata una modifica precedente a questa risposta firstChild, ma questa viene aggiornata per essere utilizzata lastChildcome nell'informatica, in generale , è significativamente più veloce rimuovere l' ultimo elemento di una raccolta piuttosto che rimuovere il primo elemento (a seconda di come viene implementata la raccolta ).
• Il ciclo continua per verificare firstChild nel caso è più veloce per verificare firstChildche lastChild(per esempio se l'elenco elemento è implementato come indicato lista concatenata dal 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>

Opzione 2 B: loop per rimuovere ogni lastElementChild:

• Questo approccio preserva tutti i non Element(cioè #textnodi e <!-- comments -->) figli del genitore (ma non i loro discendenti) - e ciò potrebbe essere desiderabile nella vostra applicazione (ad esempio alcuni sistemi di template che utilizzano commenti HTML in linea per memorizzare le istruzioni del modello).
• Questo approccio non è stato utilizzato fino agli ultimi anni in quanto Internet Explorer ha aggiunto il supporto solo per lastElementChildIE9.

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 di scimmia:

• Siamo in grado di aggiungere un nuovo metodo-struttura al Elementprototipo in JavaScript per semplificare l'invoca, a poco el.clearChildren()(dove elè qualsiasi elemento oggetto HTML).
• (A rigor di termini si tratta di una patch di scimmia, non di un polyfill, in quanto non si tratta di una funzione DOM standard o di una funzione mancante. Si noti che il patch di scimmia è giustamente scoraggiato in molte situazioni.)

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 risposta attualmente accettata è errata innerHTMLsull'essere più lento (almeno in IE e Chrome), come correttamente menzionato m93a.

Chrome e FF sono notevolmente più veloci usando questo metodo (che distruggerà i dati jquery allegati):

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

in un secondo distante per FF e Chrome, e il più veloce in IE:

node.innerHTML = '';

InnerHTML non distruggerà i gestori di eventi né spezzerà i riferimenti jquery , ma è anche consigliato come soluzione qui: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

Il metodo di manipolazione DOM più veloce (ancora più lento dei due precedenti) è la rimozione degli intervalli, ma gli intervalli non sono supportati fino a IE9.

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

Gli altri metodi citati sembrano essere comparabili, ma molto più lenti di innerHTML, ad eccezione del valore anomalo, jquery (1.1.1 e 3.1.1), che è considerevolmente più lento di ogni altra cosa:

$(node).empty();

Prova qui:

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 (Nuovo URL per il riavvio di jsperf perché la modifica del vecchio URL non funziona)

Il "per-test-loop" di Jsperf viene spesso inteso come "per-iterazione" e solo la prima iterazione ha nodi da rimuovere, quindi i risultati sono privi di significato, al momento della pubblicazione c'erano test in questa discussione impostati in modo errato.

Usa Javascript moderno, con remove!

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

Questo è un modo più nuovo di scrivere la rimozione del nodo in ES5. È JS vaniglia e legge molto meglio delle versioni precedenti.

La maggior parte degli utenti dovrebbe disporre di browser moderni o è possibile eseguire la traslazione verso il basso, se necessario.

Supporto browser - 95% dicembre 2019

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

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

Se c'è qualche possibilità che tu abbia discendenti interessati da jQuery, allora devi usare un metodo che pulirà i dati di jQuery.

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

Il .empty()metodo jQuery assicurerà che tutti i dati che jQuery associati agli elementi vengano rimossi vengano ripuliti.

Se usi semplicemente DOMmetodi per rimuovere i bambini, quei dati rimarranno.

Se usi jQuery:

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

In caso contrario:

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

Il più veloce...

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

Grazie ad Andrey Lushnikov per il suo link a jsperf.com (sito interessante!).

EDIT: per essere chiari, non c'è differenza di prestazioni in Chrome tra firstChild e lastChild. La risposta migliore mostra una buona soluzione per le prestazioni.

Se vuoi avere solo il nodo senza i suoi figli, puoi anche crearne una copia in questo modo:

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

Dipende da cosa stai cercando di ottenere.

Ecco un altro approccio:

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

È come innerText, tranne standard. È un po 'più lento di removeChild(), ma è più facile da usare e non farà molta differenza se non hai troppe cose da eliminare.

In risposta a DanMan, Maarten e Matt. Clonare un nodo, per impostare il testo è davvero un modo praticabile nei miei risultati.

// @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 );

Funziona anche con nodi non presenti nel dom che restituiscono null quando si tenta di accedere a parentNode. Inoltre, se devi essere sicuro, un nodo è vuoto prima di aggiungere contenuti, questo è davvero utile. Considera il caso d'uso sottostante.

// @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 );

Trovo questo metodo molto utile quando si sostituisce una stringa all'interno di un elemento, se non si è sicuri di cosa conterrà il nodo, invece di preoccuparsi di come ripulire il disordine, ricominciare da capo.

Ecco cosa faccio di solito:

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

E voilà, in seguito puoi svuotare qualsiasi elemento dom con:

anyDom.empty()

Ci sono un paio di opzioni per raggiungere questo obiettivo:

Il più veloce ():

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

Alternative (più lente):

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

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

Benchmark con le opzioni suggerite

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
        }
    }
}

Ciò rimuoverà tutti i nodi all'interno dell'elemento.

innerText è il vincitore! http://jsperf.com/innerhtml-vs-removechild/133 . In tutti i test precedenti, i dom interni del nodo padre sono stati eliminati alla prima iterazione e quindi innerHTML o removeChild dove applicati a div vuoti.

Il modo più semplice di rimuovere i nodi figlio di un nodo tramite Javascript

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

ho visto gente fare:

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

allora qualcuno ha detto che usare el.lastNodeè più veloce

tuttavia penso che questo sia il più veloce:

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

cosa ne pensi?

ps: questo argomento mi ha salvato la vita. il mio addon per Firefox è stato respinto perché ho usato innerHTML. È stata un'abitudine per molto tempo. poi ho trovato questo. e ho notato una differenza di velocità. al caricamento, il innerhtml ha impiegato un po 'di tempo per l'aggiornamento, ma andando ad addElement è istantaneo!

L'uso di un range range mi sembra il più naturale:

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

Secondo le mie misurazioni su Chrome e Firefox, è circa 1,3 volte più lento. In circostanze normali, questo forse non avrà importanza.

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

In generale, JavaScript utilizza array per fare riferimento a elenchi di nodi DOM. Quindi, funzionerà bene se hai interesse a farlo attraverso l'array HTMLElements. Inoltre, vale la pena notare che, poiché sto usando un riferimento di array anziché proto JavaScript, questo dovrebbe funzionare in qualsiasi browser, incluso IE.

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

Perché non stiamo seguendo il metodo più semplice qui "rimuovere" in loop all'interno mentre.

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

• Selezione del div parent
• Utilizzo del metodo "remove" all'interno di un ciclo While per l'eliminazione dell'elemento First figlio, fino a quando non ne rimane più nessuno.

Ho appena visto qualcuno menzionare questa domanda in un'altra e ho pensato che avrei aggiunto un metodo che non avevo ancora visto:

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

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

La funzione clear sta prendendo l'elemento e usando il nodo genitore per sostituirsi con una copia senza i suoi figli. Non molto guadagno in termini di prestazioni se l'elemento è scarso ma quando l'elemento ha un mucchio di nodi, i guadagni in termini di prestazioni sono realizzati.

Approccio solo funzionale:

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

"childNodes" in domChildren fornirà un nodeList degli elementi figlio immediati, che è vuoto quando non ne viene trovato nessuno. Per mappare su nodeList, domChildren lo converte in array. domEmpty mappa una funzione domRemove su tutti gli elementi che la rimuovono.

Esempio di utilizzo:

domEmpty(document.body)

rimuove tutti i bambini dall'elemento body.

Altri modi in jQuery

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

semplicemente solo IE:

parentElement.removeNode(true);

true - significa fare una rimozione profonda - il che significa che anche tutti i bambini vengono rimossi

La via più facile:

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

semplice e veloce usando per loop !!

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

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

questo non funzionerà nel <span>tag!

Se vuoi reinserirci qualcosa div, innerHTMLprobabilmente è meglio.

Il mio esempio:

<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>

Se utilizzo il metodo .firstChildo .lastChild, la displayHTML()funzione non funziona in seguito, ma nessun problema con il .innerHTMLmetodo.

Questo è un javascript puro che non sto usando jQuery ma funziona in tutti i browser anche IE ed è molto semplice da capire

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

})

con jQuery:

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