Welche Methoden gibt es zum Löschen von Knoten in JQuery?-js-Tutorial-php.cn

Welche Methoden gibt es zum Löschen von Knoten in JQuery?

伊谢尔伦

Freigeben： 2017-06-17 13:33:47

Original

1941 Leute haben es durchsucht

1 KnotenLöschen Sie die grundlegende Verwendung von empty() von

Das Entfernen von Knoten auf der Seite ist ein häufiger Vorgang für Entwickler, jQuery Zur Lösung dieses Problems stehen mehrere verschiedene Methoden zur Verfügung. Hier werfen wir einen genaueren Blick auf die leere Methode

empty. Wie der Name schon sagt, handelt es sich um eine leere Methode, die sich jedoch ein wenig vom Löschen unterscheidet Entfernt nur das angegebene Element aller untergeordneten Knoten in .

Diese Methode entfernt nicht nur untergeordnete Elemente (und andere untergeordnete Elemente), sondern auch den Text innerhalb des Elements. Denn laut Beschreibung wird jeder Text string im Element als untergeordneter Knoten des Elements betrachtet. Schauen Sie sich bitte den folgenden HTML-Code an:

<p class="hello"><p>php.cn</p></p>

Nach dem Login kopieren

Wenn wir alle Elemente in p über die leere Methode entfernen, wird nur der innere HTML-Code gelöscht, aber das Markup verbleibt weiterhin im DOM

//通过empty处理
$(&#39;.hello&#39;).empty()
//结果：<p>php.cn</p>被移除
<p class="hello"></p>

Nach dem Login kopieren

Sie können sich auf den Codebereich rechts beziehen:

Alle p-Elemente unter dem aktuellen p-Element werden durch leer entfernt Das p-Element mit id=test wurde jedoch nicht gelöscht

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    p {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>
<body>
    <h2>通过empty移除元素</h2>
    <p id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on(&#39;click&#39;, function() {
        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除
        $("#test").empty()
    })
    </script>
</body>
</html>

Nach dem Login kopieren

2. Verwendung von remove() mit und ohne Parameter zum Löschen von Knoten

Remove ist wie empty eine Methode zum Entfernen eines Elements, aber Remove entfernt das Element selbst und alles innerhalb des Elements, einschließlich gebundener Ereignisse und jQuery-Daten, die sich auf das Element beziehen.

Binden Sie beispielsweise für einen Knoten ein Klickereignis

<p class="hello"><p>php.cn</p></p>
$('.hello').on("click",fn)

Nach dem Login kopieren

Es ist eigentlich sehr einfach, diesen Knoten zu löschen, ohne die Methode zum Entfernen zu verwenden, aber gleichzeitig muss das Ereignis vorhanden sein Dies soll ein „Speicherleck“ verhindern. Daher müssen Frontend-Entwickler darauf achten, wie viele Ereignisse verknüpft sind, und daran denken, sie zu zerstören, wenn sie nicht verwendet werden.

Entfernen Sie p und alle seine internen Elemente über die Methode „remove“. Die Methode zur Ereigniszerstörung wird automatisch in „remove“ ausgeführt, daher ist die Verwendung von

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>php.cn</p></p> 全部被移除
//节点不存在了,同事事件也会被销毁

Nach dem Login kopieren

removeExpressionParameter:

remove einfacher zu verwenden als leer ist, dass Sie einen Selektorausdruck übergeben können, um den Satz übereinstimmender Elemente zu filtern, der entfernt werden soll, und Sie können bestimmte Knoten selektiv löschen

Wir können einen Satz derselben Elemente über $( auswählen ) und übergeben Sie dann die Filterregeln über „remove()“ und verarbeiten Sie sie so Unterschied zwischen „leer“ und „entfernen“ beim Löschen von Knoten

To Bei der Verwendung zum Entfernen bestimmter Elemente stellt jQuery zwei Methoden bereit, empty() und remove([expr]). Beide löschen Elemente, aber es gibt sie Noch Unterschiede zwischen den beiden

$("p").filter(":contains(&#39;3&#39;)").remove()

Nach dem Login kopieren

leere 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

empty kann seinen eigenen Knoten nicht löschen

remove-Methode

Der Knoten und alle im Knoten enthaltenen untergeordneten Knoten werden gleichzeitig gelöscht

Ermöglicht die Übergabe einer Filterung Ausdruck zum Löschen von Elementen in der angegebenen Sammlung

4. Knotenlöschung: Löschvorgang zum Beibehalten von Daten detach()

Wenn wir den Knoten auf der Seite vorübergehend löschen möchten , möchte aber nicht, dass die Daten und Ereignisse auf dem Knoten verloren gehen, und kann ihn beim nächsten Mal löschen. Der Abschnitt ermöglicht die Anzeige des gelöschten Knotens auf der Seite. Zu diesem Zeitpunkt kann die Trennmethode verwendet werden, um ihn zu verarbeiten.

Abtrennen ist wörtlich leicht zu verstehen. Lassen Sie ein Webelement hosten. Das heißt, das Element wird von der aktuellen Seite entfernt, das Speichermodellobjekt dieses Elements bleibt jedoch erhalten. Sehen wir uns die Erklärung aus der offiziellen JQuery-Dokumentation an:

Diese Methode löscht die übereinstimmenden Elemente nicht aus dem jQuery-Objekt, sodass diese übereinstimmenden Elemente in Zukunft erneut verwendet werden können. Im Gegensatz zu „remove()“ bleiben alle gebundenen Ereignisse, angehängten Daten usw. erhalten. Der Satz $("p").detach() entfernt das Objekt, aber der Anzeigeeffekt geht verloren. Aber es existiert immer noch in der Erinnerung. Beim Anhängen kehren Sie zum Dokumentenfluss zurück. Es ist wieder aufgetaucht.

Hier sollte natürlich besonderes Augenmerk darauf gelegt werden, dass die Detach-Methode nur für JQuery gilt und daher nur Ereignisse oder Daten verarbeiten kann, die über JQuery-Methoden gebunden sind.

Übergeben Sie alle $("p").detach(. ) Nachdem Sie das P-Element gelöscht haben, fügen Sie das gelöschte P-Element durch Anhängen auf der Seite ein. Durch Klicken auf den Text können Sie beweisen, dass das Ereignis nicht verloren geht

5. Der Unterschied zwischen detach(). und remove() zum Löschen von Knoten

JQuery ist eine sehr leistungsstarke Toolbibliothek. Bei der Arbeitsentwicklung werden einige Methoden von uns ignoriert, da sie nicht häufig verwendet werden oder nicht bemerkt wurden.

remove() und detach() können einer davon sein, aber detach() wird möglicherweise weniger verwendet

remove: Knoten entfernen

Entfernen Sie ohne Parameter den gesamten Knoten selbst und alle Knoten innerhalb des Knotens, einschließlich Ereignissen und Daten auf dem Knoten.

Entfernen Sie mit Parametern den gefilterten Knoten und alle Knoten innerhalb des Knotens. Alle Knoten, einschließlich Ereignisse und Daten auf dem Knoten

Abtrennen: Knoten entfernen

Die Verarbeitung des Entfernens ist konsistent mit Entfernen

Unterschiedlich zu entfernen(), alle Bindungen Die Ereignisse, zusätzliche Daten usw. wird beibehalten

Zum Beispiel: $("p").detach() entfernt das Objekt, aber der Anzeigeeffekt geht verloren. Aber es existiert immer noch in der Erinnerung. Beim Anhängen kehren Sie zum Dokumentenfluss zurück. Es ist wieder aufgetaucht.

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Löschen von Knoten in JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!