Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

親要素を削除するには?(unwrap)

2017年10月5日

現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。

  • このエントリーをはてなブックマークに追加

 unwrapメソッドは、現在の要素の親に当たる要素を削除します。

 例えば以下は、リンク(正しくは、その配下のテキスト)をクリックしたときに、そのアンカータグ(=<a>タグ)を破棄する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul>
  <li><a href="#"><span>JavaScript本格入門</span></a></li>
  <li><a href="#"><span>Angularアプリケーションプログラミング</span></a></li>
  <li><a href="#"><span>独習PHP</span></a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(function() {
  // <span>要素をクリックした時に親要素(アンカータグ)を破棄
  $('span').click(function() {
    $(this).unwrap();
  });
});
</script>
</body>
</html>
親要素を削除するためのコード(unwrap.html)
一番上のリンクをクリックすると

[醤油]をクリックした場合

そのリンクが無効化される
リンクをクリックすると、そのリンクが無効化される

 この例であれば、<span>要素に対してイベントリスナーを設定しているので、リスナー配下のthis<span>要素を指しています。よって、$(this).unwrap();<span>要素の親要素――つまり、<a>要素を破棄しなさいという意味になります。

 果たして、リンクをクリックした後の文書ツリーを、ブラウザーの開発者ツール(Chromeであれば[Elements]タブ)からも確認してみましょう。

HTML
<ul>
  <li><span>JavaScript本格入門</span></li>
  <li><a href="#"><span>Angularアプリケーションプログラミング</span></a></li>
  <li><a href="#"><span>JavaScript本格入門</span></a></li>
</ul>
[JavaScript本格入門]リンクをクリックした後のHTMLの状態

jQueryで要素を破棄するメソッド

 要素を削除するjQueryメソッドには、以下のようなものがありますので、それぞれの違いをきちんと理解しておくとよいでしょう。

メソッド 概要
remove 自身を削除
empty 要素の中身を削除
unwrap(本稿) 親要素を削除
detach リスナーを維持しながら要素を削除
jQueryの削除メソッド
処理対象:親要素の削除 カテゴリ:要素
API:.unwrap() カテゴリ:Manipulation(操作) > DOM Insertion, Around(DOM挿入、周辺)|Manipulation(操作) > DOM Removal(DOM削除)

※以下では、本稿の前後を合わせて5回分(第75回~第79回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
75. 現在の要素セットからm~n番目の要素を取得するには?(slice)

jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
76. 要素セットからn番目の要素を取得するには?(eq)

jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
77. 要素セットから特定の子要素を持つ要素だけを取得するには?(has)

jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。

jQuery逆引きリファレンス
78. 要素セットに、指定された条件に合致する要素が含まれるかを判定するには?(is)

isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。

jQuery逆引きリファレンス
79. 【現在、表示中】≫ 親要素を削除するには?(unwrap)

現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。

サイトからのお知らせ

Twitterでつぶやこう!