Wie würde ich vorgehen, um alle untergeordneten Elemente eines DOM-Knotens in JavaScript zu entfernen?

Angenommen, ich habe den folgenden (hässlichen) HTML-Code:

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

Und ich greife nach dem Knoten, den ich möchte:

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

Wie könnte ich die Kinder entfernen, foodamit nur <p id="foo"></p>noch übrig bleibt?

Könnte ich einfach tun:

myNode.childNodes = new Array();

oder sollte ich eine Kombination von verwenden removeElement?

Ich möchte, dass die Antwort direkt bei DOM ist. Allerdings zusätzliche Punkte, wenn Sie in jQuery zusammen mit der Nur-DOM-Antwort auch eine Antwort angeben.

Option 1 A: Löschen innerHTML.

• Dieser Ansatz ist einfach, eignet sich jedoch möglicherweise nicht für Hochleistungsanwendungen, da er den HTML-Parser des Browsers aufruft (obwohl Browser möglicherweise für den Fall optimieren, dass der Wert eine leere Zeichenfolge ist).

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: Löschen textContent

• Wie oben, aber verwenden .textContent. Laut MDN ist dies schneller als innerHTMLwenn Browser ihre HTML-Parser nicht aufrufen und stattdessen sofort alle untergeordneten Elemente des Elements durch einen einzelnen #textKnoten ersetzen .

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: Schleifen, um alle zu entfernen lastChild:

• Eine frühere Bearbeitung dieser Antwort wurde verwendet firstChild, diese wird jedoch aktualisiert, um sie lastChildwie in der Informatik zu verwenden. Im Allgemeinen ist das Entfernen des letzten Elements einer Sammlung erheblich schneller als das Entfernen des ersten Elements (abhängig davon, wie die Sammlung implementiert ist ).
• Die Schleife prüft weiter, firstChild nur für den Fall, dass die Suche schneller ist firstChildals lastChild(z. B. wenn die Elementliste von der UA als gerichtete verknüpfte Liste implementiert ist).

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: Schleifen, um alle zu entfernen lastElementChild:

• Dieser Ansatz bewahrt alle Nicht- Element(nämlich #textKnoten und <!-- comments -->) untergeordneten Elemente des übergeordneten Elements (jedoch nicht dessen Nachkommen) - und dies kann in Ihrer Anwendung wünschenswert sein (z. B. einige Vorlagen-Systeme, die Inline-HTML-Kommentare zum Speichern von Vorlagenanweisungen verwenden).
• Dieser Ansatz wurde erst in den letzten Jahren verwendet, da Internet Explorer nur die Unterstützung für lastElementChildIE9 hinzufügte .

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.clearChildrenAffenpflaster:

• Wir können dem ElementPrototyp in JavaScript eine neue Methodeneigenschaft hinzufügen , um das Aufrufen auf nur zu vereinfachen el.clearChildren()(wo elsich ein HTML-Elementobjekt befindet).
• (Genau genommen handelt es sich hierbei um ein Affen-Patch, nicht um eine Polyfüllung, da dies keine Standard-DOM-Funktion oder fehlende Funktion ist. Beachten Sie, dass das Patchen von Affen in vielen Situationen zu Recht nicht empfohlen wird.)

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>

Die derzeit akzeptierte Antwort ist falsch, innerHTMLweil sie langsamer ist (zumindest in IE und Chrome), wie m93a richtig erwähnt.

Chrome und FF sind mit dieser Methode erheblich schneller (wodurch angehängte Abfragedaten zerstört werden):

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

in einer fernen Sekunde für FF und Chrome und am schnellsten im IE:

node.innerHTML = '';

InnerHTML zerstört Ihre Event-Handler nicht und bricht keine JQuery-Referenzen . Es wird auch als Lösung hier empfohlen: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

Die schnellste DOM-Manipulationsmethode (immer noch langsamer als die beiden vorherigen) ist das Entfernen von Bereichen. Bereiche werden jedoch erst in IE9 unterstützt.

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

Die anderen genannten Methoden scheinen vergleichbar zu sein, aber viel langsamer als innerHTML, mit Ausnahme des Ausreißers jquery (1.1.1 und 3.1.1), der erheblich langsamer ist als alles andere:

$(node).empty();

Beweis hier:

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 (Neue URL für den Neustart von jsperf, da das Bearbeiten der alten URL nicht funktioniert)

Jsperfs "Per-Test-Loop" wird oft als "Per-Iteration" verstanden, und nur bei der ersten Iteration müssen Knoten entfernt werden, sodass die Ergebnisse bedeutungslos sind. Zum Zeitpunkt der Veröffentlichung waren Tests in diesem Thread falsch eingerichtet.

Verwenden Sie modernes Javascript mit remove!

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

Dies ist eine neuere Methode zum Schreiben der Knotenentfernung in ES5. Es ist Vanilla JS und liest sich viel besser als frühere Versionen.

Die meisten Benutzer sollten über moderne Browser verfügen, oder Sie können bei Bedarf nach unten transpilieren.

Browser-Unterstützung - 95% Dezember 2019

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

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

Wenn die Möglichkeit besteht, dass Nachkommen von jQuery betroffen sind, müssen Sie eine Methode verwenden, mit der jQuery-Daten bereinigt werden.

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

Die jQuery- .empty()Methode stellt sicher, dass alle Daten, die jQuery mit zu entfernenden Elementen verknüpft, bereinigt werden.

Wenn Sie einfach DOMMethoden zum Entfernen der untergeordneten Elemente verwenden, bleiben diese Daten erhalten.

Wenn Sie jQuery verwenden:

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

Wenn Sie nicht:

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

Das schnellste...

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

Vielen Dank an Andrey Lushnikov für seinen Link zu jsperf.com (coole Seite!).

BEARBEITEN: Um klar zu sein, gibt es in Chrome keinen Leistungsunterschied zwischen firstChild und lastChild. Die Top-Antwort zeigt eine gute Lösung für die Leistung.

Wenn Sie den Knoten nur ohne seine untergeordneten Knoten haben möchten, können Sie auch eine Kopie davon erstellen:

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

Kommt darauf an, was du erreichen willst.

Hier ist ein anderer Ansatz:

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

Es ist wie innerText, außer Standard. Es ist etwas langsamer als removeChild(), aber es ist einfacher zu verwenden und macht keinen großen Leistungsunterschied, wenn Sie nicht zu viel Material zum Löschen haben.

Als Antwort auf DanMan, Maarten und Matt. Das Klonen eines Knotens, um den Text festzulegen, ist in der Tat ein praktikabler Weg für meine Ergebnisse.

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

Dies funktioniert auch für Knoten, die sich nicht im Dom befinden und beim Versuch, auf den parentNode zuzugreifen, null zurückgeben. Wenn Sie sicher sein müssen, dass ein Knoten leer ist, bevor Sie Inhalte hinzufügen, ist dies sehr hilfreich. Betrachten Sie den Anwendungsfall darunter.

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

Ich finde diese Methode sehr nützlich, wenn Sie eine Zeichenfolge innerhalb eines Elements ersetzen. Wenn Sie nicht sicher sind, was der Knoten enthalten soll, anstatt sich Gedanken darüber zu machen, wie das Chaos beseitigt werden soll, beginnen Sie neu.

Folgendes mache ich normalerweise:

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

Und voila, später können Sie jedes dom-Element leeren mit:

anyDom.empty()

Dafür gibt es mehrere Möglichkeiten:

Das schnellste ():

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

Alternativen (langsamer):

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

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

Benchmark mit den vorgeschlagenen Optionen

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

Dadurch werden alle Knoten innerhalb des Elements entfernt.

innerText ist der Gewinner! http://jsperf.com/innerhtml-vs-removechild/133 . Bei allen vorherigen Tests wurde der innere Dom des übergeordneten Knotens bei der ersten Iteration gelöscht und dann innerHTML oder removeChild auf leeres div angewendet.

Einfachste Möglichkeit, die untergeordneten Knoten eines Knotens über Javascript zu entfernen

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

Ich sah Leute tun:

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

dann sagte jemand, dass die Verwendung el.lastNodeschneller ist

Ich würde jedoch denken, dass dies das schnellste ist:

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

Was denken Sie?

ps: dieses thema hat mir das leben gerettet. Mein Firefox-Addon wurde abgelehnt, weil ich innerHTML verwendet habe. Es ist schon lange eine Gewohnheit. dann foudn ich das. und ich bemerkte tatsächlich einen Geschwindigkeitsunterschied. Beim Laden dauerte es eine Weile, bis der innerhtml aktualisiert wurde, jedoch wurde addElement sofort ausgeführt!

Die Verwendung einer Bereichsschleife fühlt sich für mich am natürlichsten an:

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

Nach meinen Messungen in Chrome und Firefox ist es ungefähr 1,3x langsamer. Unter normalen Umständen spielt dies möglicherweise keine Rolle.

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

Im Allgemeinen verwendet JavaScript Arrays, um Listen von DOM-Knoten zu referenzieren. Dies funktioniert also gut, wenn Sie Interesse daran haben, dies über das HTMLElements-Array zu tun. Erwähnenswert ist auch, dass ich in jedem Browser, einschließlich IE, funktionieren sollte, da ich anstelle von JavaScript-Proto eine Array-Referenz verwende.

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

Warum folgen wir hier nicht der einfachsten Methode?

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

• Auswahl des übergeordneten Div
• Verwenden der "remove" -Methode in einer While-Schleife zum Entfernen des ersten untergeordneten Elements, bis kein Element mehr vorhanden ist.

Ich habe gerade gesehen, wie jemand diese Frage in einer anderen erwähnte und dachte, ich würde eine Methode hinzufügen, die ich noch nicht gesehen habe:

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

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

Die Löschfunktion nimmt das Element und verwendet den übergeordneten Knoten, um sich durch eine Kopie ohne untergeordnete Elemente zu ersetzen. Nicht viel Leistungsgewinn, wenn das Element dünn ist, aber wenn das Element eine Reihe von Knoten hat, werden die Leistungsgewinne realisiert.

Nur funktionaler Ansatz:

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

"childNodes" in domChildren gibt eine Knotenliste der unmittelbaren untergeordneten Elemente an, die leer ist, wenn keine gefunden werden. Um die Knotenliste zuzuordnen, konvertiert domChildren sie in ein Array. domEmpty ordnet eine Funktion domRemove allen Elementen zu, die sie entfernen.

Anwendungsbeispiel:

domEmpty(document.body)

Entfernt alle Kinder aus dem Körperelement.

Andere Möglichkeiten in jQuery

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

einfach nur IE:

parentElement.removeNode(true);

true - bedeutet eine tiefe Entfernung - was bedeutet, dass auch alle Kinder entfernt werden

Der einfachste Weg:

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

einfach und schnell mit for loop !!

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

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

Dies wird nicht im <span>Tag funktionieren !

Wenn Sie etwas zurückbringen möchten div, innerHTMList das wahrscheinlich besser.

Mein Beispiel:

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

Wenn ich die Methode .firstChildoder .lastChildverwende, displayHTML()funktioniert die Funktion danach nicht mehr, aber kein Problem mit der .innerHTMLMethode.

Dies ist ein reines Javascript, das ich nicht mit jQuery verwende, aber es funktioniert in allen Browsern, auch im IE, und es ist sehr einfach zu verstehen

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

})

mit jQuery:

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