ホームページ > 記事 > ウェブフロントエンド > jqueryでノードを削除する方法は何ですか?

jqueryでノードを削除する方法は何ですか?

伊谢尔伦オリジナル: 2017-06-17 13:33:471858ブラウズ

1 ノード削除 empty() の基本的な使用法

ページ上のノードを削除することは、開発者にとって一般的な操作です jQuery について詳しく見ていきます。空のメソッド

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

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

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

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

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

のコード領域を参照できます。右:

空を渡すと、現在の 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>

2. パラメータあり、パラメータなしのremove()のノード削除

removeはemptyと同じで、どちらも要素を削除する方法ですが、これを削除します要素自体と、要素に関連するバインドされたイベントや jQuery データを含む要素内のすべてのものを削除します。

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

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

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

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

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

remove式パラメータ:

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

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

右のコード領域と比べて処理できますこんな感じ

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

3. ノード削除時のemptyとremoveの違い

指定した要素を削除する場合、jQueryにはempty()とremove([expr])という2つのメソッドが用意されていますが、どちらも要素を削除します。

empty メソッド

厳密に言えば、() メソッドはノードを削除しませんが、要素内のすべての子孫ノードをクリアできます。

それ自体を削除することはできません。

remove メソッド

ノードとそのノードに含まれるすべての子孫ノードが同時に削除されます

指定されたコレクション内の要素を削除するためのフィルター式を渡します

4。データを保持した削除操作 detach()

ページ上のノードを一時的に削除したいが、削除しない場合ノード上のデータとイベントが失われ、削除されたノードを画面上に表示できるようにしたい場合次の期間のページでは、detach メソッドを使用して処理できます。

detach は文字通り理解するのが非常に簡単です。 Web 要素をホストします。つまり、要素は現在のページから削除されますが、この要素のメモリモデルオブジェクトは保持されます。

jquery 公式ドキュメントの説明を見てみましょう:

このメソッドは jQuery オブジェクトから一致する要素を削除しないため、これらの一致する要素は将来再び使用できます。 Remove() とは異なり、すべてのバインドされたイベント、添付データなどが保持されます。 $("p").detach() という文はオブジェクトを削除しますが、表示効果は失われます。しかし、それは記憶の中にまだ存在しています。追加すると、ドキュメントフローに戻ります。またまた現れました。

もちろん、ここでは特別な注意を払う必要があります。そのため、$("p").detach() を通じてすべての P 要素を削除した後、JQuery メソッドを通じてバインドされたイベントまたはデータのみを処理できます。 , 次に、削除した p 要素を append でページに配置し、テキストをクリックしてイベントが失われていないことを証明します

5 ノード削除の detach() とremove() の違い

JQuery は非常に複雑です。強力なツールライブラリ、作品開発では、一般的に使用されない、または注目されていないため、いくつかのメソッドが無視されます。

remove() と detach() はその 1 つかもしれません。おそらく、remove() の使用頻度は高くなりますが、detach() はあまり使用されないかもしれません。

remove: ノードを削除します。

パラメータはなく、ノード自体を削除します。ノード全体と内部のすべてのノードです。ノード (ノード上のイベントやデータを含む)

パラメーターを使用して、フィルターされたノードと、ノード上のイベントやデータを含むノード内のすべてのノードを削除します

detach: ノードを削除します

削除プロセスは、remove と一致します

remove()とは異なり、すべてのバインドされたイベント、追加データなどが保持されます

例: $("p").detach() は移動されますオブジェクトを除き、表示効果のみが失われます。しかし、それは記憶の中にまだ存在しています。追加すると、ドキュメントフローに戻ります。またまた現れました。

以上がjqueryでノードを削除する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery はオブジェクトの長さをどのように取得して計算しますか?次の記事：jQuery はオブジェクトの長さをどのように取得して計算しますか?

続きを見る