jQuery 要素を削除する remove() empty()
今回は、jQueryの「remove()」と「empty() 」について書きます。
両方とも、要素を削除するメソッドです。
1.「remove()」
removeは、マッチしている自身の要素も含めて、子要素も全て削除します。
基本的にこのように使います。
例1
$('div').remove();
例2
<body> <div class="main"> <div class="hey">HEY!</div> <div class="foo">Foooooo!</div> </div> <script> $(function(){ $('div').remove(); }); </script> </body>
こちらを実行すると、div要素が削除され、何も表示されません。
引数は、こんな感じです。
.remove([ selector ]);
selectorを指定すると、指定した条件にあったものだけ削除されます。
<body> <div class="main"> <div class="hey">HEY!</div> <div class="foo">Foooooo!</div> </div> <script> $(function(){ $('div').remove('.hey'); }); </script> </body>
実行結果
「hey」だけが削除されています。
2.「empty() 」
emptyは、要素内の子要素を全て削除します。
「empty」は、中身を削除する所が「remove」との違いです。
「remove」は、要素そのものを削除します。しかし、「empty」は、中身だけが削除され、要素は残ります。
基本的にこのように使います。
例1
$('.hey').empty();
例2
<body> <div class="main"> <div class="hey">HEY!</div> <div class="foo">Foooooo!</div> </div> <script> $(function(){ $('.hey').empty(); }); </script> </body>
実行結果
要素の中身だけ削除されています。
引数はこんな感じです。
.empty()
引数は、無いです(笑)
まとめると・・・
・remove:要素ごと全て削除する。
・empty:中身を削除する。要素は残る。
これで、終わります。
参考サイト
.remove() | jQuery 1.9 日本語リファレンス | js STUDIO
.empty() | jQuery 1.9 日本語リファレンス | js STUDIO