Heim  >  Artikel  >  Web-Frontend  >  So entfernen Sie ein Element mit jquery

So entfernen Sie ein Element mit jquery

青灯夜游
青灯夜游Original
2022-03-16 18:12:265346Durchsuche

So entfernen Sie ein Element mit jquery: 1. Verwenden Sie die Funktion empty() mit der Syntax „specify the element object.empty()“; 2. Verwenden Sie die Funktion „remove()“ mit der Syntax „specify the element object.remove“. ()“; 3. Verwenden Sie die Funktion detach(), die Syntax lautet „Elementobjekt angeben.detach()“.

So entfernen Sie ein Element mit jquery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Methode zum Entfernen von jQuery-Elementen

1. Methode empty()

Entfernt alle untergeordneten Knoten übereinstimmender Elemente in der Sammlung aus dem DOM.
Beispiel:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Entfernungsmethode:

$(&#39;.hello&#39;).empty();

Effekt:

<div class="container">
   <div class="hello"></div>
   <div class="goodbye">Goodbye</div>
</div>

Wenn

beliebig viele verschachtelte Elemente enthält, werden diese ebenfalls entfernt.
Um Speicherlecks zu vermeiden, entfernt jQuery zunächst die Daten- und Ereignisverarbeitungsfunktionen der untergeordneten Elemente und entfernt dann die untergeordneten Elemente.

2. Methode „remove()“:

Beschreibung: Entfernen Sie den Übereinstimmungssatz Elemente aus dem DOM. (Entfernt außerdem Ereignisse und jQuery-Daten auf dem Element.)

Ähnlich wie .empty(). .remove() verschiebt das Element aus dem DOM. Wenn wir das Element selbst entfernen möchten, verwenden wir .remove(), wodurch auch alles innerhalb des Elements entfernt wird, einschließlich gebundener Ereignisse und jQuery-Daten, die sich auf das Element beziehen.

Beispiel:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Remove-Methode:

$(&#39;.hello&#39;).remove();
或者用
$(&#39;div&#39;).remove(&#39;.hello&#39;);

Effekt :

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

Das heißt, das der Klasse entsprechende p wird ebenfalls entfernt

3. detach()-Methode:

Entfernen Sie alle übereinstimmenden Elemente aus dem DOM

detach()-Methode ist dasselbe wie .remove(), außer dass .detach() alle mit dem entfernten Element verknüpften jQuery-Daten speichert. Diese Methode ist nützlich, wenn Sie ein Element entfernen und es später in das DOM einfügen müssen.

4. html("")-Methode:

html()-Methode gibt den aktuellen Inhalt des ausgewählten Elements zurück, wenn keine Parameter festgelegt sind. html("") löscht den aktuellen Inhalt des ausgewählten Elements. Die Methode

empty() entfernt den gesamten Inhalt aus dem ausgewählten Element, einschließlich aller Text- und untergeordneten Knoten.

Der endgültige Effekt der beiden ist der gleiche

  • html()-Rückgabewert: String, was bedeutet, dass er mit Variablen empfangen werden kann

  • empty()-Rückgabewert: jQuery kann nicht mit Variablen empfangen werden

Zusätzlich:

empty()-Methode hat keine Parameter und die gelöschte Teilmenge und der gelöschte Text können nicht wiederhergestellt werden. Die Methoden „detach()“ und „remove()“ können es in einer Variablen speichern
Deklarieren Sie beispielsweise die Variable p und schreiben Sie sie in der folgenden Form

var p=$(&#39;p&#39;).remove();

Wenn Sie sie von Grund auf neu hinzufügen müssen, können Sie sie wie folgt direkt hinzufügen

p.appendTo("body");

Dies sind die Methoden detach() und remove(). Alle haben Funktionen. Der Unterschied zwischen Remove() und Detach() besteht darin, dass Remove() bestimmte Klassen wie Remove('a') löschen kann, Detach() dies jedoch nicht.

Beachten Sie außerdem Folgendes: Wenn Sie die Methode „remove()“ verwenden, um ein Element zu entfernen und es dann hinzuzufügen, sind die Ereignisse der Teilmenge nicht vorhanden, die Ereignisse der Teilmenge „detach()“ können jedoch weiterhin ausgeführt werden.

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Front-End-Entwicklungsvideo

Das obige ist der detaillierte Inhalt vonSo entfernen Sie ein Element mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn