DOMノード削除におけるemptyとremoveの違い-jsチュートリアル-php.cn

DOMノード削除におけるemptyとremoveの違い

一个新手

リリース： 2017-09-29 10:04:01

オリジナル

2033 人が閲覧しました

ページ上のノードの削除は、開発者にとって一般的な操作です。jQuery には、この問題に対処するためのさまざまなメソッドが用意されています。ここでは、empty メソッドと delete メソッドを詳しく見ていきます

その名前が示すように、empty メソッドはとは異なります。削除では、指定された要素内のすべての子ノードのみが削除されるため、少し異なります。

このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。指示によれば、要素内のテキスト文字列は要素の子ノードとみなされます。以下の HTML を見てください:

<p class="hello"><p>这是p标签</p></p>

ログイン後にコピー

空のメソッドで p 内のすべての要素を削除すると、内部の HTML コードがクリアされるだけですが、マークアップは DOM に残ります

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

ログイン後にコピー

通过empty移除了当前p元素下的所有p元素，但是本身id=test的p元素没有被删除

ログイン後にコピー

<!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>

ログイン後にコピー

Remove は empty と同様に要素を削除するメソッドですが、remove は要素自体と要素内のすべてのもの (バインドされたイベントや要素に関連する jQuery データを含む) を削除します。

たとえば、ノードはクリックイベントにバインドされています

<p class="hello"><p>这是P段落</p></p>$(&#39;.hello&#39;).on("click",fn)

ログイン後にコピー

実際には、remove メソッドを使用せずにこのノードを削除するのは非常に簡単ですが、同時にイベントを破棄する必要があります。「メモリリーク」があるため、フロントエンド開発の読者は、関連付けられているイベントの数に注意し、使用していないときはイベントを破棄することを忘れないでください

remove メソッドを使用して p とそのすべての内部要素を削除します。イベントの破棄メソッドは自動的に実行されます。 Remove 内で操作されるため、使い方は非常に簡単です

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

ログイン後にコピー

remove 式パラメータ:

空よりも Remove の利点は、削除する一致する要素のセットをフィルタリングするセレクター式を渡すことができることです。指定したノードを選択的に削除できます

$() を渡して同じ要素のグループを選択し、remove() を通してフィルタリングルールを渡すことで処理できます

<!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>

ログイン後にコピー

指定した要素を削除したい場合は、jQuery empty() と Remove([expr] ) の 2 つのメソッドが提供され、どちらも要素を削除しますが、この 2 つのメソッドにはまだ違いがあります:

指定された要素を削除する必要がある場合、jQuery は 2 つのメソッド、empty() とRemove([expr])、両方どちらも要素を削除しますが、2 つの違いはまだあります

empty メソッド