Wie kann ich einen untergeordneten Knoten in HTML mit JavaScript entfernen?


74

Gibt es eine Funktion wie document.getElementById("FirstDiv").clear()?


node.remove();ist der moderne Weg, dies zu tun. document.getElementById("FirstDiv").remove();für Ihren Anwendungsfall
Gibolt

Antworten:


101

Um die ursprüngliche Frage zu beantworten: Es gibt verschiedene Möglichkeiten, dies zu tun, aber die folgende wäre die einfachste.

Wenn Sie bereits ein Handle für den untergeordneten Knoten haben, den Sie entfernen möchten, dh Sie haben eine JavaScript-Variable, die einen Verweis darauf enthält:

myChildNode.parentNode.removeChild(myChildNode);

Wenn Sie keine der zahlreichen Bibliotheken verwenden, die dies bereits tun, möchten Sie natürlich eine Funktion erstellen, um dies zu abstrahieren:

function removeElement(node) {
    node.parentNode.removeChild(node);
}

BEARBEITEN: Wie bereits von anderen erwähnt: Wenn Ereignisbehandlungsroutinen mit dem zu entfernenden Knoten verbunden sind, sollten Sie sicherstellen, dass Sie diese trennen, bevor der letzte Verweis auf den zu entfernenden Knoten den Gültigkeitsbereich verlässt, damit keine schlechten Implementierungen auftreten des JavaScript-Interpreter-Leckspeichers.


1
Durch "schlechte Implementierungen". Meinen Sie IE6, IE7, IE8 oder etwas anderes? (Insbesondere verlieren die guten Browser auch Speicher? Ich interessiere mich derzeit nicht mehr für IE 6-7.)
Camilo Martin

@CamiloMartin - Ich bin mir heutzutage der Einzelheiten nicht sicher, aber soweit ich mich erinnere, sollen die "guten" Browser auf solche Dinge achten und damit umgehen. YMMV
Jason Bunting

47

Wenn Sie das div löschen und alle untergeordneten Knoten entfernen möchten, können Sie Folgendes eingeben:

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

11

Moderne Lösung - child.remove()

Für Ihren Anwendungsfall:

document.getElementById("FirstDiv").remove()

Dies wird von W3C seit Ende 2015 empfohlen und ist Vanilla JS . Alle gängigen Browser unterstützen dies.

Mozilla Docs

Unterstützte Browser - 96% Mai 2020


Bitte bearbeiten Sie, um anzugeben, was "vorherige Methode" ist, da Fragen nach oben / unten abgestimmt und entfernt werden. Dies endet ohne endgültige Bedeutung
Mark Schultheiss

3

Sie müssen alle Ereignishandler entfernen, die Sie auf dem Knoten festgelegt haben, bevor Sie ihn entfernen, um Speicherverluste im IE zu vermeiden


3

Eine jQuery-Lösung

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Javascript

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

Verweise:

Attribut gleich Selektor [Name = Wert]

Wählt Elemente mit dem angegebenen Attribut aus, deren Wert genau einem bestimmten Wert entspricht.

Kinderauswahl ("Eltern> Kind")

Wählt alle direkten untergeordneten Elemente aus, die durch "untergeordnetes Element" angegeben sind, oder Elemente, die durch "übergeordnetes Element" angegeben sind.

.entfernen()

Ähnlich wie bei .empty () werden bei der Methode .remove () Elemente aus dem DOM entfernt. Wir verwenden .remove (), wenn wir das Element selbst sowie alles darin entfernen möchten. Zusätzlich zu den Elementen selbst werden alle gebundenen Ereignisse und jQuery-Daten, die den Elementen zugeordnet sind, entfernt.


2

Verwenden Sie den folgenden Code:

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

1
    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p ist der übergeordnete Knoten und c ist der
untergeordnete Knoten. parentNode ist eine JavaScript-Variable, die die übergeordnete Referenz enthält.

Leicht zu verstehen


0

Sie sollten in der Lage sein, die .RemoveNode-Methode des Knotens oder die .RemoveChild-Methode des übergeordneten Knotens zu verwenden.


0

Sie sollten wahrscheinlich eine JavaScript-Bibliothek verwenden, um solche Dinge zu tun.

Zum Beispiel hat MochiKit eine Funktion removeElement und jQuery hat remove .

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.