要素に影響を及ぼすjQueryの削除メソッド

jQueryで要素に影響を与える削除メソッド方法のご紹介です。
要素を消したい場合に、jQueryでは要素を消す以外にも、中身を空にしたり、親要素を削除したり、削除した要素を再利用したりと様々な用途に合わせたイベントが用意されています。

要素を削除する - remove()

指定した要素ごと削除するにはremove()メソッドを使います。一番イメージしやすいメソッドだと思います。削除された要素は子要素も含めて全て削除されます。

[HTML]

<div id="test">
  <p>removeメソッド</p>
</div>

[jQuery]

$('#test').remove();

div要素もその中のp要素も削除されます。

要素の中身を要素を削除する - empty()

指定した要素の中身を削除するにはempty()メソッドを使います。
emptyは指定した要素の子要素含め削除されます。子要素を削除するという紹介をされているケースもありますが、自身のテキスト内容も削除されるので注意が必要です。

[HTML]

<p id="test">
  何かしらのテキスト
  <span><b>emtpy</b>メソッド</span>
</p>

[jQuery]

$('#test').empty();

結果「何かしらのテキスト」含めspan要素b要素ごと中身が削除されます。「<p id="test"></p>」のみが残ります。

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

指定した要素の1つ上の親要素を削除します。
emptyなどと違い親要素全てでは無く1つ上の親要素のみを削除します。また親要素のテキスト内容は削除されませんので、emptyの逆バージョンのようなものをイメージすると動作に戸惑う事になります。

[HTML]

<div>
  <p id="test">
    何かしらのテキスト
    <span>emtpyメソッド</span>
  </p>
</div>

[jQuery]

$('span').unwrap();

「<p id="test"></p>」が削除されます。
ここでポイントは、「何かしらのテキスト」部分は影響を受けない点です。

<div>
  何かしらのテキスト
  <span>emtpyメソッド</span>
</div>

このメソッドは親要素を削除と言う言葉でイメージする範囲と実際の動作が違う方も多いと思いますので、ご利用の際はご注意ください。

機能を残して要素を削除する - detach()

要素を削除するという点においてはremove()メソッドと同様の動きをします。
remove()メソッドと違うのは、イベント情報や関連データが保持された状態で削除されます。その為復元した際にイベント情報などの機能も含めて元に戻すことができます。

削除対象をappendで戻した場合に、remove()で削除した場合はイベントなどの機能は損なわれていますが、detach()で削除したものはそれらが何事も無かったように動作します。

一度optionをdisplay属性で表示/非表示をした際に、IE11ではそれが効かないという所でハマりかけましたが、detach()で回避した記憶があります。

最後に

いくつかの削除機能のメソッドがありますが、特にdetach()は使うシーンは限られると思います。
remove()で大抵のことは対処できますので、まずはremove()メソッドで削除イベントに慣れる事から始めると良いと思います。他はそういう機能があるな程度に記憶しておき、必要な時調べれば良いかと思います。