親要素のみ削除する方法[jQuery1.4系版]
結構前のエントリーで『jQueryメモ：親要素だけ消すってどうやるんだろう？』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。
今回の各でもについて
今回のデモは下記のHTMLをそれぞれ利用します。
利用するHTML
<a href="#damy"><span>サンプルデモ</span></a>デモ５だけは子要素にSPANがないものを利用しています。
このうちAタグのみ削除することを目的とします。リンクが外れていたら成功。
プラス、中のSPAN要素には、中のテキストをアラートするクリックイベントを付けておいて、今回の親要素削除後も動作するかをチェックできるようにしてみます（spanを子要素に持たないデモはこのイベントは付けていません。）
子要素(SPAN要素へのイベント)
$('span','.preview').click(function(){
alert($(this).text());
});以前までの方法
jQuery1.4系より前のバージョンでは、親要素を取り除くというメソッドは特に用意されていなかったため、覆っている親要素だけを取り除くには、少し工夫が必要でした。
例えば以前紹介した方法だと、下記のようにしていました。
■.replaceWith()と.each()
$('a','#demo1').each(function(){
$(this).replaceWith($(this).html());
});■デモ１
この記述だと、以前のエントリー時に@cyokodogさんに指摘していただいた通り、子要素につけてイベントは消失してしまいます。
1.4系以降の方法（.unwrap()メソッド利用）
jQueryの1.4系から「.unwrap()」というメソッドが加わりました。覆っている要素を取り除くメソッドです。
■.children()と.unwrap()
$('a','#demo2').children().unwrap();$('要素')で指定した部分の親要素が削除されてしまうため、指定した部分自体を消すには.children()などを付けて対象を変えておく必要があります。
■デモ２
この方法であれば、子要素に指定しておいたイベントは消失しません。
.children()の他には.contents()も利用可能。
■.contents()と.unwrap()
$('a','#demo3').contents().unwrap();■デモ３
こちらの方法も先程同様、子要素に指定しておいたイベントは消失しません。
ここまで削除したい親要素自体を最初から指定していましたが、消したい要素の子要素をあらかじめ指定しておけば.unwrap()のみで消せるので、基本は下記のようにしておくべきでしょう。
■.unwrap()
$('span','#demo4').unwrap();■デモ４
中身がテキストのみの場合
削除したいタグの中身がテキストのみの場合、.childrenではうまく行かないので、デモ３で紹介した.contents()を使うとうまく期待通りの部分が削除されます。
■.contents()と.unwrap()（子要素SPAN無し）
$('a','#demo5').contents().unwrap();■デモ５
今回は５つデモを紹介しました。それぞれFirebugで削除されているか確認してみて下さい。
