最終更新日: 2021年1月16日
jQueryで親要素を削除する方法をサンプルコード付き解説！
jQueryで親要素を削除する方法をサンプルコード付きで解説します。親要素を削除し、子要素を残す方法と残さない方法の両方のパターンを紹介します。
jQueryで親要素を削除する方法
親要素を削除する（子要素は残す）
jQueryのunwrapメソッドを使って、親要素のみを削除します。jQueryのwrapメソッドは要素を指定したタグで囲むメソッドですが、unwrapメソッドはその逆で囲みから外す（すなわち親要素を削除）となります。
それでは使い方を下記のサンプルコードで見てみましょう。
上記のサンプルコードは#parentのセレクタにcolor: blueを設定しており、子要素の文字は青になっています。
そして子要素をクリックしたときにjQueryのunwrapメソッドで親要素を削除しています。親要素が削除されたため、文字色は通常の黒に戻っていることが確認できるかと思います。
このようにjQueryのunwrapは親要素のみを削除し、子要素を残す働きがあります。
親要素・子要素を削除する
子要素をクリックしたときに親要素をと、子要素を同時に削除するのは簡単です。jQueryのparentメソッドで親要素を取得しremoveメソッドで親要素を削除します。（まとめて子要素も削除されます）
