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

2022年6月5日2023年7月9日

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

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

楽天ブックス

¥2,794 （2025/02/16 17:38時点 | 楽天市場調べ）

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

ポチップ

親要素を削除する

親要素を削除する場合、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();
});

よかったらシェアしてね！