jQuery逆引きリファレンス
親要素を削除するには？（unwrap）
現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。
unwrapメソッドは、現在の要素の親に当たる要素を削除します。
例えば以下は、リンク（正しくは、その配下のテキスト）をクリックしたときに、そのアンカータグ（＝<a>タグ）を破棄する例です。
|
<!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>
|
［醤油］をクリックした場合
この例であれば、<span>要素に対してイベントリスナーを設定しているので、リスナー配下のthisも<span>要素を指しています。よって、$(this).unwrap();で<span>要素の親要素――つまり、<a>要素を破棄しなさいという意味になります。
果たして、リンクをクリックした後の文書ツリーを、ブラウザーの開発者ツール（Chromeであれば［Elements］タブ）からも確認してみましょう。
|
<ul>
<li><span>JavaScript本格入門</span></li>
<li><a href="#"><span>Angularアプリケーションプログラミング</span></a></li>
<li><a href="#"><span>JavaScript本格入門</span></a></li>
</ul>
|
jQueryで要素を破棄するメソッド
要素を削除するjQueryメソッドには、以下のようなものがありますので、それぞれの違いをきちんと理解しておくとよいでしょう。
API：.unwrap() カテゴリ：Manipulation（操作） > DOM Insertion, Around（DOM挿入、周辺）｜Manipulation（操作） > DOM Removal（DOM削除）
※以下では、本稿の前後を合わせて5回分（第75回～第79回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
75. 現在の要素セットからm～n番目の要素を取得するには？（slice）
jQueryオブジェクトで保持している要素セットから、指定したm～n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
76. 要素セットからn番目の要素を取得するには？（eq）
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。
77. 要素セットから特定の子要素を持つ要素だけを取得するには？（has）
jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。
78. 要素セットに、指定された条件に合致する要素が含まれるかを判定するには？（is）
isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。
79. 【現在、表示中】≫ 親要素を削除するには？（unwrap）
現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。
