【jQuery】detach()を使って指定した要素を切り離す!

指定した要素を切り離すにはdetach()を使用します。

detach()とは、要素を削除するメソッドであり、指定してセレクターの要素を削除することができます。

指定した要素を削除するメソッドにはremove()メソッドも思い浮かぶかと思いますが、jQueryオブジェクトを完全に削除するremove()メソッドに比べて、detach()メソッドはの場合は関連付けられているjQueryオブジェクトの情報を削除後も保存することができるので、一度削除した要素を、またどこかで使用したい場合などに便利です。

その為、remove()メソッドは一度完全に削除するイメージで、detach()メソッドは一度どこかに保存するイメージとなります。

今回は、jQueryのdetach()を使って指定した要素を切り離す方法について以下の内容で解説していきます。

⚫︎ 指定した要素を切り離す

⚫︎ detach()とremove()の違い

ハルトさん

今回はjQueryのdetach()を使って指定した要素を切り離す方法について説明していきます。

さとみさん

はい!
お願いします!

detach()とは

detach()とは、指定した要素を削除するメソッドとなります。

しかし、削除後は完全に削除されるわけではなく情報は保持されるので、言葉的には「切り離す」という言葉が適切かもしれません。

detach()の書き方

detach()メソッドの構文は下記となります。

セレクターの要素にdetach()メソッドを呼び出すことで指定したセレクターの要素を削除することができます。

指定した要素を切り離すサンプルコード

指定した要素を切り離すサンプルコードを紹介します。

sample.html

style.css

index.js

実行結果

detach()メソッドによって、指定した要素を削除しています。
その為、btn1クラスのボタンを押すとdiv1クラスの要素が切り離され、btn2クラスのボタンを押すとdiv要素が切り離されます。

さとみさん

detach()メソッドで指定した要素を切り離していますね!

ハルトさん

そうですね。
セレクターの後にdetach()メソッドを使用することで、指定した要素を切り離しています。

detach()とremove()の違い

要素を削除するメソッドはdetach()メソッド以外にもremove()メソッドがありますが、この二つのメソッドには違いがあります。

それは、「削除した要素の情報を削除後も保存することができるかどうか」です。

remove()メソッドは要素を完全に削除するので情報を保存できませんが、detach()メソッドは削除した要素の情報を削除後も情報を保存します。

jQueryのremove()メソッドについて詳しく知りたい場合こちらをご参考ください。

さとみさん

削除した要素の情報を削除後も保存することができるとどういったことができるんですか?

ハルトさん

削除した要素の情報を削除後も保存することができると、削除した要素を別の要素にそのまま追加することができます。
言葉ではよく分からないと思いますので、一度サンプルコードを見てみましょう。

sample.html

style.css

index.js

実行結果

detach()メソッドではイベントまで引き継ぐことはできますが、remove()メソッドではイベントまで引き継ぐことができません。

その為、両方のメソッドで削除した後に追加した要素をクリックするとdivクラスの要素をクリックすると背景色が変化しますが、div2クラスの要素をクリックすると背景色は変化しません。

さとみさん

確かに、detach()で削除して再び追加した要素を押すと、背景色が変化しますけど、remove()で削除した要素をクリックすると背景色が変わりませんね!

ハルトさん

そうですね。
detach()メソッドは削除するというより一度、別の場所へ保管するイメージに比べて、remove()メソッドは一度完全に削除して、新しい要素として追加するイメージとなります。
その為、detach()メソッドではイベントまで引き継ぐことはできますが、remove()メソッドではイベントまで引き継ぐことができません。

今回のポイント

detach()で指定した要素を切り離す

⚫︎ 指定した要素を切り離すにはjQueryのdetach()メソッドを使用する

⚫︎ detach()メソッドとremove()メソッドの違いは削除した要素の情報を削除後も保存することができるかどうかである
(要素の情報を保存した状態で削除すると、削除した要素を別の要素にそのまま追加することができる)

Writer

Soshi

株式会社flyhawkのSoshiです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報