jQuery

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

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

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

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

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

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

親要素を削除する

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

jQuery削除メソッド一覧

jQuery 要素削除一覧
unwrap親要素の削除
remove対象要素の削除
empty子要素の削除
detachデータやイベント情報を残したまま対象要素の削除

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村