jQuery DOM削除ノード操作 guide_jquery

次の例では、次の HTML コードを使用する場合があります:

コードをコピーします コードは次のとおりです:

• Apple


• バナナ


• オレンジ


• ブドウ


• イチゴ

1.remove() メソッド:

機能: DOM から一致する要素をすべて削除します。渡されたパラメーターは、jQuery 式に基づいて要素をフィルターするために使用されます。

たとえば、上の図の

ノードの 2 番目の
• 要素ノードを削除するには、jQuery コードは次のようになります。
  コードをコピーします コードは次のとおりです:
  $(document).ready(function() {
  $("ul li:eq(1)").remove();
  });
  
  
  remove() メソッドを使用してノードを削除すると、そのノードに含まれるすべての子孫ノードも同時に削除されます。このメソッドの戻り値は削除されたノードへの参照であるため、要素は後で再度使用できます。次の jQuery コードは、remove() メソッドを使用して要素を削除した後も、その要素を引き続き使用できることを示しています。
  コードをコピーします コードは次のとおりです:
  var $li=$("ul li:eq(1)").remove();
  $li.appendTo("ul"); // 削除したノードを
  要素に再度追加します。
  
  appendTo() メソッドの機能を直接使用して、上記のコードを簡素化できます。
  コードをコピーします コードは次のとおりです:
  $("ul li:eq(1)").appendTo("ul");//appendTo() メソッドを使用して要素を移動する場合は、まずドキュメントから要素を削除してから、要素を移動します。要素をドキュメント内の指定されたノードに挿入します。
  
  
  さらに、remove() メソッドはパラメータを渡すことで要素を選択的に削除することもできます。
  コードをコピーします コードは次のとおりです:
  $("ul li").remove("li[title='t1']");
  
  

  2. detach() メソッド:

  Detach() は、remove() と同様に、DOM から一致する要素をすべて削除します。ただし、このメソッドは jQuery オブジェクトから一致する要素を削除しないため、将来的にこれらの一致する要素を再利用できることに注意してください。 Remove() とは異なり、すべてのバインドされたイベント、添付ファイル データなどが保持されます。
  次の例を通して、remove() メソッドとの違いを知ることができます。
  コードをコピーします コードは次のとおりです:
  $("ul li").click(function(){
  アラート($(this).html());
  })
  var $li=$("ul li:eq(1)").detach() //要素を削除します
  $li.appendTo("ul"); // この要素を再度追加すると、以前にバインドされていたイベントがまだ存在していることがわかります。remove() メソッドを使用して要素を削除すると、以前にバインドされていたイベントが削除されます。無効である
  
  

  3. empty() メソッド

  厳密に言えば、empty() メソッドはノードを削除しませんが、要素内のすべての子孫ノードをクリアできます。
  コードをコピーします コードは次のとおりです:
  $("ul li:eq(1)").empty();//2 番目の
• 要素ノードを取得した後、この要素内のコンテンツをクリアします。