Der Unterschied zwischen leer und entfernen beim Löschen von DOM-Knoten-js-Tutorial-php.cn

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

一个新手

Freigeben： 2017-09-29 10:04:01

Original

1958 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

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!