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

Question

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

Answer 1

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, d. h.Sie haben eine JavaScript-Variable, die einen Verweis darauf enthält:

myChildNode.parentNode.removeChild(myChildNode);

Wenn Sie nicht eine 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 schon von anderen erwähnt wurde:Wenn Sie Event-Handler mit dem zu entfernenden Knoten verbunden haben, sollten Sie sicherstellen, dass Sie diese trennen, bevor der letzte Verweis auf den zu entfernenden Knoten den Gültigkeitsbereich verlässt, damit bei schlechten Implementierungen des JavaScript-Interpreters kein Speicher verloren geht.

Answer 2

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

Answer 3

targetNode.remove()

Dies wird seit Ende 2015 vom W3C empfohlen und ist es auch Vanille JS.Viel besser/sauberer als die vorherige Methode.

Für Ihren Anwendungsfall:

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

Wenn Sie eine Polyfüllung benötigen, um die Abwärtskompatibilität sicherzustellen:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Mozilla-Dokumente

Unterstützte Browser - 92 % März 2018

Answer 4

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

Answer 5

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 aus, die das angegebene Attribut mit einem Wert genau gleich einem bestimmten Wert haben.

Kinderauswahl („Eltern > Kind“)

Wählt alle direkten untergeordneten Elemente aus, die von "Kind" der von "Eltern" angegebenen Elemente angegeben sind.

.entfernen()

Ähnlich wie bei .Empty () nimmt die .remove () -Methode Elemente aus dem DOM.Wir verwenden .Remove (), wenn wir das Element selbst entfernen möchten, sowie alles darin.Zusätzlich zu den Elementen selbst werden alle mit den Elementen verbundenen gebundenen Ereignisse und JQuery -Daten entfernt.

Answer 6

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.

Answer 7

    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 eine übergeordnete Referenz enthält

Einfach zu verstehen

Answer 8

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

Answer 9

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

MochiKit hat beispielsweise eine Funktion RemoveElement, und jQuery hat entfernen.