jQuery-DOM-Löschknotenoperation guide_jquery

Das folgende Beispiel kann den folgenden HTML-Code verwenden:

Code kopieren Der Code lautet wie folgt:

• Apple


• Banane


• Orange


• Trauben


• Erdbeere

1. Methode „remove()“:

Funktion: Alle übereinstimmenden Elemente aus dem DOM entfernen. Die übergebenen Parameter werden zum Filtern von Elementen basierend auf jQuery-Ausdrücken verwendet.

Um beispielsweise den zweiten

-Elementknoten im obigen Bild zu löschen, lautet der jQuery-Code wie folgt:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
$("ul li:eq(1)").remove();
});

Wenn ein Knoten mit der Methode „remove()“ gelöscht wird, werden alle im Knoten enthaltenen untergeordneten Knoten gleichzeitig gelöscht. Der Rückgabewert dieser Methode ist eine Referenz auf den gelöschten Knoten, sodass die Elemente später wieder verwendet werden können. Der folgende jQuery-Code zeigt, dass das Element nach dem Löschen mit der Methode „remove()“ weiterhin verwendet werden kann.

Code kopieren Der Code lautet wie folgt:

var $li=$("ul li:eq(1)").remove();
$li.appendTo("ul"); //Den gelöschten Knoten erneut zum

hinzufügen

Sie können die Funktionen der appendTo()-Methode direkt verwenden, um den obigen Code zu vereinfachen:

Code kopieren Der Code lautet wie folgt:

$("ul li:eq(1)").appendTo("ul");//Die appendTo()-Methode kann auch zum Verschieben von Elementen verwendet werden. Löschen Sie beim Verschieben eines Elements zuerst das Element aus dem Dokument und dann Fügen Sie das Element in den angegebenen Knoten im Dokument ein.

Darüber hinaus kann die Methode „remove()“ auch selektiv Elemente löschen, indem Parameter übergeben werden:

Code kopieren Der Code lautet wie folgt:

$("ul li").remove("li[title='t1']");

2. detach()-Methode:

Detach() entfernt wie remove() auch alle passenden Elemente aus dem DOM. Es ist jedoch zu beachten, dass diese Methode die übereinstimmenden Elemente nicht aus dem jQuery-Objekt entfernt und es somit ermöglicht, diese übereinstimmenden Elemente in Zukunft wiederzuverwenden. Im Gegensatz zu „remove()“ bleiben alle gebundenen Ereignisse, Anhangsdaten usw. erhalten.

Anhand des folgenden Beispiels können Sie den Unterschied zwischen dieser Methode und der Methode „remove()“ erkennen:

Code kopieren Der Code lautet wie folgt:

$("ul li").click(function(){
alarm($(this).html());
})
var $li=$("ul li:eq(1)").detach(); //Element löschen
$li.appendTo("ul"); // Dieses Element erneut anhängen und feststellen, dass das Ereignis, an das es zuvor gebunden war, immer noch vorhanden ist. Wenn Sie die Methode „remove()“ verwenden, um das Element zu löschen, wird das Ereignis, an das es zuvor gebunden war, noch vorhanden sein ungültig sein;

3. empty()-Methode

Genau genommen löscht die Methode empty() den Knoten nicht, sondern löscht den Knoten. Sie kann alle untergeordneten Knoten im Element löschen.

Code kopieren Der Code lautet wie folgt:

$("ul li:eq(1)").empty();//Nachdem Sie den zweiten

-Elementknoten erhalten haben, löschen Sie den Inhalt in diesem Element.