【jQuery】unwrap()を使って囲んでいる要素を消去する!

囲んでいる要素を消去するにはjQueryのunwrap()を使用します。

jQueryのunwrap()とは指定要素を囲む要素(親要素)を削除するメソッドであり、指定した要素を1つ上にある要素を削除することができます。

その為、wrap()メソッドやwrapAll()メソッドで作成された親要素はもちろんunwrap()で削除することができます。

また、unwrap()はrap()メソッドやwrapAll()メソッドで作成された親要素を削除することだけでなく、指定した要素の親要素が既存の要素であったとしても削除することができますので注意してください。

今回は、jQueryのunwrap()を使って、囲んでいる要素を消去する方法について以下の内容で解説していきます。

⚫︎ wrap()で囲んでいる親要素を消去する場合
⚫︎ wrapAll()で囲んでいる要素を消去する場合

⚫︎ unwrap()の注意すべきこと

ハルトさん

今回はjQueryのunwrap()で指囲んでいる要素を消去する方法について説明していきます。

さとみさん

お願いします!

unwrap()とは

jQueryのunwrap()とは要素の親エレメントを削除するメソッドです。
指定する要素を囲み、親要素を追加するwrap()に対して、真逆の親要素を取り除く動作となります。

unwrap()の書き方

unwrap()の書き方は下記となります。

セレクタに要素を指定することで、囲んでいる要素の親要素を削除することができます。

囲んでいる要素を消去するサンプルコード

囲んでいる要素を消去するサンプルコードを紹介します。

wrap()で囲んでいる親要素を消去する場合

unwrap()メソッドでwrap()メソッドによって囲んでいる親要素の消去を行います。

sample.html

style.css

index.js

出力結果

unwrap()によってwrap()メソッドで囲んでいる親要素を削除することができます。
その為、ボタンを押すとnewElement1クラスの要素が削除されています。

wrapAll()で囲んでいる要素を消去する場合

unwrap()メソッドでwrapAll()メソッドによって囲んでいる親要素の消去を行います。

sample.html

style.css

index.js

出力結果

unwrap()によってwrapAll()メソッドで囲んでいる親要素を削除することができます。
その為、ボタンを押すとnewElement2クラスの要素が削除されています。

unwrap()の注意すべきこと

unwrap()はwrap()やwrapAll()によって囲まれた要素を削除するだけでなく、既存の要素も削除する対象に入るので注意が必要です。

さとみさん

unwrap()はwrap()やwrapAll()によって囲まれた新たな要素を削除するだけでなく、セレクタの親要素であるならば、既存の要素も削除されるってことですか?

ハルトさん

そうなりますね。
ここでunwrap()メソッドのサンプルコードを紹介します。

sample.html

style.css

index.js

出力結果

セレクタにpを指定した場合、pの親要素はdivXクラスとdivYクラスなのでその2つのクラスが削除されます。
その為、ボタンを一回押すと文字の色と大きさが元に戻ります。

さとみさん

divXクラスとdivYクラスはwrap()やwrapAll()で作成された要素ではありませんが、unwrap()によって削除されてますね!

ハルトさん

そうですよね。
サンプルコードを見てわかることから、unwrap()は「指定した要素のラップされた要素を削除するというメソッド」ではなく、「指定した要素の親要素を削除するメソッド」であると認識した方が良いですね。

今回のポイント

unwrap()で囲んでいる要素を消去

⚫︎ 囲んでいる要素を消去するにはjQueryのunwrap()を使用する

⚫︎ unwrap()メソッドはwrap()メソッドやwrapAll()メソッドによって囲まれた親要素を削除することができる

⚫︎ unwrap()メソッドの注意点として既存している要素が指定した要素の親要素である場合でも削除することができる

関連記事

jQueryのwrap()で要素を指定したタグで囲む方法についてはこちらをご参考ください。

jQueryのwrapAll()で指定した要素をまとめて囲む方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

フリーランスエンジニアの案件探し