Wie kann ich einen untergeordneten Knoten in HTML mithilfe von JavaScript entfernen?

Question

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

Answer 1

Um die ursprüngliche Frage zu beantworten, zu vermeiden - es gibt verschiedene Wege, dies zu tun, aber die folgenden wäre am einfachsten.

Wenn Sie bereits ein Handle für den untergeordneten Knoten, die Sie entfernen möchten, dh Sie einen JavaScript-Variable, die einen Verweis auf sie hält:

myChildNode.parentNode.removeChild(myChildNode); 

Natürlich, wenn Sie nicht eine der verwenden zahlreiche Bibliotheken, die dies bereits tun, eine Funktion zu abstrahieren dieser heraus erstellen möchte:

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

---

EDIT: Wie von anderen erwähnt: wenn Sie irgendwelche Event-Handler haben verdrahtet Für den Knoten, den Sie entfernen, sollten Sie sicherstellen, dass Sie diese Verbindungen trennen, bevor der letzte Verweis auf den Knoten, der entfernt wird, den Gültigkeitsbereich verlässt, damit die Implementierungen des JavaScript-Interpreters keinen Speicher verlieren.

Answer 2

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

Answer 3

Wenn Sie das div löschen wollen und alle untergeordneten Knoten entfernen, könnten Sie setzen:

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

Answer 4

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

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

Answer 5

Sie haben keine Event-Handler entfernen Sie auf dem Knoten festgelegt haben, bevor Sie es zu entfernen, Speicherlecks in IE

Answer 6

A 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(); 

Referenzen:

Attribute Equals Selector [name=value]

Wählt Elemente, die die angegebene Attribut mit einem Wert genau gleich einem bestimmten Wert haben.

Child Selector (“parent > child”)

Wählt alle direkten Elemente Kind spezifiziert durch "Kind" von Elementen spezifiziert durch "Eltern"

.remove()

Ähnlich .empty (), die .remove() Methode nimmt Elemente aus dem DOM. Wir verwenden .remove(), wenn wir das Element selbst entfernen möchten, sowie alles darin. Zusätzlich zu werden die Elemente selbst, alle Ereignisse und jQuery-Daten verknüpft mit die Elemente entfernt.

Answer 7

Verwenden Sie den folgenden Code ein:

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

targetNode.remove()

Das von W3C ab Ende 2015 empfohlen wird, und ist Vanille JS. Viel besser/sauberer als die vorherige Methode.

Für Ihren Anwendungsfall:

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

Wenn Sie eine polyfill müssen sicherstellen, Rückwärtskompatibilität:

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

Answer 9

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

p Elternknoten und c Kindknoten
parentNode ist ein JavaScript-Variable, die die übergeordnete Referenz enthält

Einfach zu verstehen