jQueryでDOM要素を削除する方法を紹介します。
jQueryの要素の削除に使えるメソッドには、remove()とempty()、さらにunwrap()、の４つがあります。
以下のHTMLを使い「要素を消す」ボタンをクリックすることで、要素が削除される例で説明します。
HTML
|
1 2 3 4 |
<div id="parent"> <p class="child">子要素</p> </div> <button id="button">要素を消す</button> |
要素を丸ごと削除する.remove()
remove()は、指定した要素ごと削除するメソッドです。例の場合、#parentごと子要素も含め削除されます。
jQuery
|
1 2 3 |
$("#button").on("click", function(){ $("#parent").remove(); }); |
要素の中を空にする.empty()
一方、empty()は、指定した要素の子要素のみ削除します。つまり、指定した要素の中身を空（empty）にするということです。
例の場合、子要素は削除されます親要素の#parentは削除されずそのまま残ります。
jQuery
|
1 2 3 |
$("#button").on("click", function(){ $("#parent").empty(); }); |
削除後のHTML
|
1 2 3 |
<div id="parent"> </div> <button id="button">要素を消す</button> |
親要素を削除する.unwrap()
unwrap()は、指定した要素の親要素を削除し、指定した要素は残します。
例の場合、指定された#childは残し、親要素の#parentのみ削除されます。
jQuery
|
1 2 3 |
$("#button").on("click", function(){ $("#child").unwrap(); }); |
削除後のHTML
|
1 2 |
<p class="child">子要素</p> <button id="button">要素を消す</button> |
削除した要素を再利用する.detach()
detach()は、remove()と同じく指定した要素を削除するメソッドです。remove()との違いは、イベント、ハンドラなどを削除しても保持するという点です。
remove()とdetach()の違いのサンプル
例えば、対象要素に対してクリックイベントを設定していて、一度削除(remove|detach)してから再度表示した場合、以下のような結果となります。
remove() → クリックイベントが動作しない
detach() → クリックイベントが動作する
HTML
|
1 2 3 4 |
<div id="target">デタッチされる要素</div> <button id="detach">detach</button> <button id="remove">remove</button> <button id="append">再表示</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//【1】#targetをクリックすると背景を赤に変更 $('#target').on("click", function(){ $(this).css('background' , 'red'); }); //【2】detachボタンをクリックするとdetach $('#detach').on("click", function() { div = $('#target').detach(); }); //【3】removeボタンをクリックするとremove $('#remove').on("click", function() { div = $('#target').remove(); }); //【4】再表示ボタンをクリックすると再表示 $('#append').on("click", function() { $('#detach').before(div); }); |
以下の例で、実際のdetach()とremove()の挙動の違いを試すことができます。
1. detach|removeボタンを押す
2. 再表示ボタンを押す
3. デタッチされる要素をクリック
See the Pen JGVwbv by Yuichi Iwayama (@UXMILK) on CodePen.
detach()削除した要素を、後ほど再度使用したい場合などに便利です。ただし、単純に、要素の表示・非表示を切り替えるだけの場合は、toggle()やhide(), show()などを使ったほうが良いでしょう。
