ホームページ > 記事 > ウェブフロントエンド > jQueryで要素を削除するにはどうすればよいですか? Remove()、detach()、empty() の単純な比較
jQuery で要素とコンテンツを削除するには、remove() メソッド、detach() メソッド、empty() メソッドの 3 つの方法があります。次の記事では、これら 3 つのメソッドが要素を削除する方法と、remove() メソッド、detach() メソッド、empty() メソッドの違いについて説明します。 [ビデオ チュートリアルの推奨: jQuery チュートリアル ]
jQuery delete() メソッド
remove () メソッドは、選択した要素 (その中のすべてのテキスト要素と子ノード要素を含む) を削除するために使用されます。
次のコード例は、remove() メソッドが要素を削除する方法を学習します。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <title>jQuery remove()方法</title> <style> #demo{ padding: 10px; border: 1px solid red; } </style> </head> <body> <h1 style="color:red;">PHP中文网</h1> <div id="demo"> <h2>使用remove()方法删除!</h2> <p>测试文本!</p> </div> <br> <button>删除</button> <script src="js/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("#demo").remove(); }); }); </script> </body> </html>
出力:
削除ボタンをクリックする前:
##削除ボタンをクリックした後:
jQuery detach() メソッド
detach() メソッドは、選択した要素 (すべてのテキスト要素と子ノード要素を含む) を削除するために使用されます。それ。<script src="js/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("#demo").detach(); }); }); </script>出力: 削除ボタンをクリックする前:
##削除ボタンをクリックした後:
説明: remove() メソッドと detach() メソッドは両方とも、選択された要素とその内部のすべてのコンテンツを削除しますが、remove メソッドは() メソッドは要素自体のみを保持しますが、要素の jQuery データは保持しません。たとえば、バインドされたイベントやデータは削除されます。
ただし、detach() メソッドは、要素自体を保持するだけでなく、すべてのバインドされたイベント、追加データなども保持します。
jQuery empty() メソッドempty() メソッドは、選択した要素に含まれるすべてのコンテンツ (すべてのテキストを含む) を削除するために使用されます。そして子要素。
次のコード例は、empty() メソッドが要素を削除する方法を学習します。
<script src="js/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("#demo").empty(); }); }); </script>
出力:
削除ボタンをクリックする前:
##削除ボタンをクリックした後:
注:
empty() メソッドは、選択した要素内のすべてのコンテンツを削除するだけで、選択した要素自体は削除されません。
以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !以上がjQueryで要素を削除するにはどうすればよいですか? Remove()、detach()、empty() の単純な比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。