jQueryで親要素を削除する方法(unwrap)

本記事では、jQueryで親要素を削除することができるunwrapメソッドの使い方について詳しく解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

参考書が苦手な人はUdemyの動画がおすすめ
即実践　手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

Contents

親要素を削除する

親要素を削除する場合、unwrapメソッドを使います。

$("要素").unwrap();

親要素を削除するだけなので、引数などの指定はありません。

下記のサンプルコードでは、親要素に対してスタイルcolor:redを適用しています。テキストをクリックすると対象の親要素が削除されcolorがデフォルトの黒に変更します。

<p><span>テキスト1</span></p>
<p><span>テキスト2</span></p>
<p><span>テキスト3</span></p>

p{
  color:red;
  cursor:pointer;
}

$("span").on("click",function(){
  $(this).unwrap();
});