jqueryで要素を削除する方法

Jquery メソッドで要素を削除します: 1. empty() 関数、構文「要素 object.empty() を指定します」を使用します; 2. Remove() 関数、構文「要素を指定します」を使用します。 object.remove() )"; 3. detach() 関数を使用します。構文は「要素を指定します object.detach()」です。

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jQuery 要素削除メソッド

1.empty() メソッド

DOM のコレクションから一致する要素をすべて削除します。の子ノード。
例:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

削除方法:

$('.hello').empty();

効果:

<div class="container">
   <div class="hello"></div>
   <div class="goodbye">Goodbye</div>
</div>

に任意の数のネストされた要素が含まれている場合、それらも削除されます。
メモリ リークを回避するために、jQuery はまず子要素のデータおよびイベント処理関数を削除し、次に子要素を削除します。

2. Remove() メソッド:

説明: 一致する要素のセットを DOM から削除します。 (要素上のイベントと jQuery データも削除します。)

.empty() に似ています。 .remove() は要素を DOM の外に移動します。 要素自体を削除したい場合は、.remove() を使用します。これにより、要素に関連するバインドされたイベントや jQuery データなど、要素内のすべてのものも削除されます

例:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

削除メソッド:

$('.hello').remove();
或者用
$('div').remove('.hello');

効果:

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

つまり、クラスに対応する自身の p も削除されます

3. detach() メソッド:

DOM から一致する要素をすべて削除します

detach() メソッドと .remove() .detach を除いて同じです() は、削除された要素に関連付けられたすべての jQuery データを保存します。このメソッドは、要素を削除して後で DOM に挿入する必要がある場合に便利です。

4. html("") メソッド:

html() メソッドは、パラメーターが設定されていない場合、選択された要素を返します。の現在の内容です。 html("") 選択した要素の現在の内容をクリアします。

empty() メソッドは、選択した要素からすべてのテキストと子ノードを含むすべてのコンテンツを削除します。

2 つの最終的な効果は同じです

• html() 戻り値: 文字列。変数で受け取ることができることを意味します

• empty() 戻り値: jQuery は変数を使用して

##さらに: empty ( ) メソッドにはパラメータがないため、クリアされたサブセットとテキストを復元することはできません。 detach() メソッドとremove() メソッドは変数に保存できます。

たとえば、次の形式で変数 p を宣言します。

var p=$('p').remove();

再度追加する必要がある場合は、次のように直接追加できます。

p.appendTo("body");

これは、detach() メソッドとremove() メソッドの両方の関数です。 Remove() と detach() の違いは、remove() は、remove('a') などの指定されたクラスを削除できますが、detach() はこれを実行できないことです。

また、

remove() メソッドを使用して要素を削除して追加すると、サブセットのイベントは存在しなくなりますが、detach() サブセットのイベントは引き続き存在する可能性があることにも注意してください。実行されました。

【推奨学習:

jQuery ビデオ チュートリアル

、Web フロントエンド開発ビ​​デオ ]

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