jQueryでDOM要素を削除する:remove(), empty(), unwrap(), detach()

jQueryでDOM要素を削除する方法を紹介します。

jQueryの要素の削除に使えるメソッドには、remove()とempty()、さらにunwrap()、の4つがあります。

以下のHTMLを使い「要素を消す」ボタンをクリックすることで、要素が削除される例で説明します。

HTML

<div id="parent">
  <p class="child">子要素</p>
</div>
<button id="button">要素を消す</button>

要素を丸ごと削除する.remove()

remove()は、指定した要素ごと削除するメソッドです。例の場合、#parentごと子要素も含め削除されます。

jQuery

$("#button").on("click", function(){
  $("#parent").remove();
});

要素の中を空にする.empty()

一方、empty()は、指定した要素の子要素のみ削除します。つまり、指定した要素の中身を空(empty)にするということです。

例の場合、子要素は削除されます親要素の#parentは削除されずそのまま残ります。

jQuery

$("#button").on("click", function(){
  $("#parent").empty();
});

削除後のHTML

<div id="parent">
</div>
<button id="button">要素を消す</button>

親要素を削除する.unwrap()

unwrap()は、指定した要素の親要素を削除し、指定した要素は残します。

例の場合、指定された#childは残し、親要素の#parentのみ削除されます。

jQuery

$("#button").on("click", function(){
  $("#child").unwrap();
});

削除後のHTML

<p class="child">子要素</p>
<button id="button">要素を消す</button>

削除した要素を再利用する.detach()

detach()は、remove()と同じく指定した要素を削除するメソッドです。remove()との違いは、イベント、ハンドラなどを削除しても保持するという点です。

remove()とdetach()の違いのサンプル

例えば、対象要素に対してクリックイベントを設定していて、一度削除(remove|detach)してから再度表示した場合、以下のような結果となります。

remove() → クリックイベントが動作しない
detach() → クリックイベントが動作する

HTML

<div id="target">デタッチされる要素</div>
<button id="detach">detach</button>
<button id="remove">remove</button>
<button id="append">再表示</button>

jQuery

//【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()などを使ったほうが良いでしょう。