jQueryにおけるDOMノードの削除方法のまとめ（超全面）

4849 ワード
jquery 削除 dom ノード
前言
ご存知のように、ページ上のノードを削除するのは開発者によくある操作です。jQueryはこの問題を解決するためにいくつかの異なる方法を提供しています。詳しく紹介しますので、興味のある方は一緒に見てみましょう。
一、empty
emptyは名前の通り、クリア方法がありますが、削除とはまた違っています。指定された要素の中のすべてのサブノードだけが取り除かれています。
この方法は、サブ要素だけでなく、要素内のテキストも削除します。説明によると、要素内の任意の文字列は、その要素のサブノードと見なされるからである。empty方法でdivのすべての要素を除去すると、内部のhtmlコードだけがクリアされますが、マークはまだDOMに残っています。emptyを通じて現在のdiv要素の下のp要素を除去しましたが、id=testのdiv要素は削除されていません。

 $("button").on('click', function() {
 //  empty     div      p  
 //    id=test div       
 $("#test").empty()
 })
二、レモブ
removeはemptyと同じように、要素を除去する方法ですが、removeは要素自体を除去します。同時に、結合されたイベントとその要素に関するjQueryデータも含めて、要素内部のすべてを除去します。
例えば、ノードをバインドしてクリックした場合、このノードをリモーブで削除しないと簡単ですが、同時にイベントを破壊する必要があります。ここでは「メモリ漏れ」を防ぐために、フロントエンドの開発者は注意しなければなりません。remove法でdivとその内部のすべての要素を除去します。remove内部ではイベントの破壊方法を自動的に操作しますので、使いやすいです。
remove表式パラメータ:
removeがemptyより良いところは、削除されるマッチング要素のセットをフィルタリングするためのセレクタ式を伝えることができ、指定されたノードを選択的に削除することができ、$()を介して同じ要素のセットを選択し、remove（）を介してフィルタリングのルールを伝えることができます。

<body>
 <style>
 .test1 {
 background: #bbffaa;
 }
 
 .test2 {
 background: yellow;
 }
 </style>
 <h2>  jQuery remove      </h2>
 <div class="test1">
 <p>p  1</p>
 <p>p  2</p>
 </div>
 <div class="test2">
 <p>p  3</p>
 <p>p  4</p>
 </div>
 <button>    jQuery empty    </button>
 <button>    jQuery empty      </button>
 <script type="text/javascript">
 $("button:first").on('click', function() {
 //     class=test1 div  
 $(".test1").remove()
 })

 $("button:last").on('click', function() {
 //    p   ，   3   
 //            
 $("p").remove(":contains('3')")
 })
 </script>
</body>
empptyとremoveの違い
指定された要素を除去する場合、jQueryは$("p").filter(":contains('3')").remove()とempty()の2つの方法を提供していますが、いずれも削除要素です。
emptyメソッド
  • は、厳密には、remove([expr])方法は、ノードを削除するのではなく、すべての後裔ノードを空にすることができます。
  • emptyは自分自身のノードを削除できません。
    • remove方法
  • このノードは、ノードに含まれるすべての後裔ノードと同時に削除されるであろう。
  • は、選択されたセットの要素を削除するためのフィルタ表現を提供します。
    • 三、detach
    ページ上のノードを一時的に削除したいと思っていますが、ノード上のデータとイベントがなくなり、次の時間帯にこの削除されたノードをページに表示させることができます。この場合、detach方法を使ってdetachを処理することができます。字面から分かりやすくなります。ウェブ要素をホストします。現在のページから要素を削除しますが、この要素のメモリモデルオブジェクトを保持します。
    この方法は一致する要素をjQueryオブジェクトから削除しないので、将来的にこれらのマッチングの要素を再利用することができます。empty()と違って、すべてのバインディングされたイベント、付加的なデータなどが保持されます。remove()この文はオブジェクトを削除します。表示効果がないだけです。メモリにはまだあります。あなたがappedした後、再びドキュメントフローに戻りました。また表示されます。
    もちろんここで注意したいのですが、detach方法はJQuery特有のものですので、JQueryの方法で縛られたイベントやデータしか処理できません。$("div").detach()ですべてのP要素を削除した後、appndで削除したpをページに置いて、文字をクリックしてテストすることができます。イベントは失われていません。
    
<body>
 <p>P  1，           </p>
 <p>P  2，           </p>
 <button id="bt1">     p   </button>
 <button id="bt2">     p   </button>
 <script type="text/javascript">
 $('p').click(function(e) {
 alert(e.target.innerHTML)
 })
 var p;
 $("#bt1").click(function() {
 if (!$("p").length) return; //  
 //  detach      
 //       ，              
 //          
 p = $("p").detach()
 });

 $("#bt2").click(function() {
 // p         
 //      
 $("body").append(p);
 });
 </script>
</body>
    detach()とremove()の違い
    JQueryは大きな工具庫です。仕事で中開発にいますが、やはりあまり使われないからです。あるいは気づかなかったから無視する方法があります。 $("p").detach()とremove()はその中の一つかもしれません。detach()は私達が多く使うかもしれません。remove()は少ないかもしれません。
    二つの方法の違いを比較表で説明します。 
    メソッド名
    パラメータ
    イベントやデータも削除されますか？
    要素自体を削除しますか？
    remove
    選択表現に対応
    はい、
    はい（パラメータがない場合）、パラメータがある場合はパラメータによる範囲です。
    detach
    パラメータとremove
    いいえ、
    状況は同じだ
    remove：ノードを削除
  • は、自身のノード全体およびノードの内部のすべてのノードを削除し、ノード上のイベントとデータを含むパラメータを有しない。
  • には、フィルタリングされたノードおよびノードの内部のすべてのノードが、ノード上のイベントとデータを含むパラメータがあります。
    • detach：ノードを削除する
  • 削除された処理はremoveと一致しています。
  • はdetach()と違って、すべてのバインディングされたイベント、付加的なデータなどが保持されます。
  • 例えば、remove()という文はオブジェクトを除去し、表示効果だけが無くなります。メモリにはまだあります。あなたがappedした後、再びドキュメントフローに戻りました。また表示されます。
    • 締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてほしいです。もし疑問があれば、メッセージを残して交流してもいいです。
    浅分析C++中前置声明の応用と落とし穴
    C葃定時更新の簡単な例