Heim > Web-Frontend > js-Tutorial > Hauptteil

Der Unterschied zwischen leer und entfernen beim Löschen von DOM-Knoten

一个新手
Freigeben: 2017-09-29 10:04:01
Original
1919 Leute haben es durchsucht

Das Entfernen von Knoten auf der Seite ist ein häufiger Vorgang für Entwickler, um dieses Problem zu lösen. Hier schauen wir uns die Methoden „leer“ und „leer“ genauer an , löscht die Methode, unterscheidet sich jedoch ein wenig von delete, da nur alle untergeordneten Knoten im angegebenen Element entfernt werden.

Diese Methode entfernt nicht nur untergeordnete Elemente (und andere untergeordnete Elemente), sondern auch den Text innerhalb des Elements. Denn gemäß den Anweisungen wird jede Textzeichenfolge im Element als untergeordneter Knoten des Elements betrachtet. Bitte schauen Sie sich den folgenden HTML-Code an:


Wenn wir alle Elemente in p mit der leeren Methode entfernen, wird nur der innere HTML-Code gelöscht, aber das Markup bleibt In Das DOM,
<p class="hello"><p>这是p标签</p></p>
Nach dem Login kopieren


//通过empty处理
$(&#39;.hello&#39;).empty()
//结果:<p>这是p标签</p>被移除<p class="hello"></p>
Nach dem Login kopieren
通过empty移除了当前p元素下的所有p元素,但是本身id=test的p元素没有被删除
Nach dem Login kopieren


remove ist dasselbe wie empty, beide Methoden werden zum Entfernen von Elementen verwendet , aber entfernen Dadurch wird das Element selbst sowie alles innerhalb des Elements entfernt, einschließlich gebundener Ereignisse und jQuery-Daten, die sich auf das Element beziehen.
<!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

Binden Sie beispielsweise für einen Knoten ein Klickereignis


Es ist tatsächlich sehr einfach, diesen Knoten zu löschen, ohne die Methode zum Entfernen zu verwenden. Gleichzeitig muss das Ereignis jedoch zerstört werden, um „Speicherlecks“ zu verhindern. Daher müssen Front-End-Entwickler darauf achten, wie viele Ereignisse verknüpft sind, und daran denken, es zu zerstören, wenn es nicht verwendet wird
<p class="hello"><p>这是P段落</p></p>$(&#39;.hello&#39;).on("click",fn)
Nach dem Login kopieren

Entfernen Sie p und alle seine internen Elemente über die Remove-Methode. Remove führt automatisch die Ereigniszerstörungsmethode intern aus, daher ist die Verwendung von


remove sehr einfach Ausdrucksparameter:
//通过remove处理
$(&#39;.hello&#39;).remove()
//结果:<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁
Nach dem Login kopieren

Entfernen ist einfacher zu verwenden als leer. Wo Sie einen Selektorausdruck übergeben können, um den Satz übereinstimmender Elemente zu filtern, der entfernt wird, und Sie können den angegebenen Knoten selektiv löschen

Wir Sie können eine Gruppe derselben Elemente über $() auswählen und dann die Filterregeln über Remove() übergeben, um


zu verarbeiten Um bestimmte Elemente zu entfernen, stellt jQuery die beiden Methoden „empty()“ und „remove([ expr])“ zur Verfügung, die beide Elemente löschen, aber es gibt immer noch Unterschiede zwischen den beiden:
<!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>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style></head><body>
    <h2>通过jQuery remove方法移除元素</h2>
    <p class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <p class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </p>
    <button>通过点击jQuery的empty移除元素</button>
    <button>通过点击jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on(&#39;click&#39;, function() {        //删除整个 class=test1的p节点        $(".test1").remove()
    })

    $("button:last").on(&#39;click&#39;, function() {        //找到所有p元素中,包含了3的元素
        //这个也是一个过滤器的处理        $("p").remove(":contains(&#39;3&#39;)")
    })    </script></body></html>
Nach dem Login kopieren

Wenn Sie ein bestimmtes Element entfernen möchten, jQuery bietet empty() und remove([expr]) Zwei Methoden, beide löschen Elemente, aber es gibt immer noch Unterschiede zwischen den beiden

leere Methode

    Genau genommen, Die Methode empty() löscht keine Knoten, sondern löscht den Knoten, der alle untergeordneten Knoten im Element löschen kann
  • empty kann seinen eigenen Knoten nicht löschen
  • Methode entfernen

    Der Knoten und alle im Knoten enthaltenen untergeordneten Knoten werden gleichzeitig gelöscht
  • Vorausgesetzt Übergeben eines Filterausdrucks zum Löschen von Elementen in der angegebenen Sammlung
  • Das Obige ist der Unterschied zwischen den beiden. Lassen Sie uns unser Verständnis durch den Codeteil auf der rechten Seite vertiefen


Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen leer und entfernen beim Löschen von DOM-Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!