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

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

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

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

HTML

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

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

jQuery

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

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

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

jQuery

削除後のHTML

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

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

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

jQuery

削除後のHTML

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

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

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

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

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

HTML

jQuery

以下の例で、実際のdetach()とremove()の挙動の違いを試すことができます。

1. detach|removeボタンを押す
2. 再表示ボタンを押す
3. デタッチされる要素をクリック

See the Pen JGVwbv by Yuichi Iwayama (@UXMILK) on CodePen.

detach()削除した要素を、後ほど再度使用したい場合などに便利です。ただし、単純に、要素の表示・非表示を切り替えるだけの場合は、toggle()やhide(), show()などを使ったほうが良いでしょう。