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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

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();
});