THE HAM MEDIA BLOG

親要素のみ削除する方法[jQuery1.4系版]

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
親要素
jquery
Unwrap

親要素だけ削除

結構前のエントリーで『jQueryメモ:親要素だけ消すってどうやるんだろう?』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。

今回の各でもについて

今回のデモは下記のHTMLをそれぞれ利用します。

利用するHTML

<a href="#damy"><span>サンプルデモ</span></a>

デモ5だけは子要素にSPANがないものを利用しています。

このうちAタグのみ削除することを目的とします。リンクが外れていたら成功。

プラス、中のSPAN要素には、中のテキストをアラートするクリックイベントを付けておいて、今回の親要素削除後も動作するかをチェックできるようにしてみます(spanを子要素に持たないデモはこのイベントは付けていません。)

子要素(SPAN要素へのイベント)

$('span','.preview').click(function(){
    alert($(this).text());
});

以前までの方法

jQuery1.4系より前のバージョンでは、親要素を取り除くというメソッドは特に用意されていなかったため、覆っている親要素だけを取り除くには、少し工夫が必要でした。

例えば以前紹介した方法だと、下記のようにしていました。

■.replaceWith()と.each()

$('a','#demo1').each(function(){
    $(this).replaceWith($(this).html());
});

■デモ1

この記述だと、以前のエントリー時に@cyokodogさんに指摘していただいた通り、子要素につけてイベントは消失してしまいます。

1.4系以降の方法(.unwrap()メソッド利用)

jQueryの1.4系から「.unwrap()」というメソッドが加わりました。覆っている要素を取り除くメソッドです。

■.children()と.unwrap()

$('a','#demo2').children().unwrap();

$('要素')で指定した部分の親要素が削除されてしまうため、指定した部分自体を消すには.children()などを付けて対象を変えておく必要があります。

■デモ2

この方法であれば、子要素に指定しておいたイベントは消失しません。

.children()の他には.contents()も利用可能。

■.contents()と.unwrap()

$('a','#demo3').contents().unwrap();

■デモ3

こちらの方法も先程同様、子要素に指定しておいたイベントは消失しません。

ここまで削除したい親要素自体を最初から指定していましたが、消したい要素の子要素をあらかじめ指定しておけば.unwrap()のみで消せるので、基本は下記のようにしておくべきでしょう。

■.unwrap()

$('span','#demo4').unwrap();

■デモ4

中身がテキストのみの場合

削除したいタグの中身がテキストのみの場合、.childrenではうまく行かないので、デモ3で紹介した.contents()を使うとうまく期待通りの部分が削除されます。

■.contents()と.unwrap()(子要素SPAN無し)

$('a','#demo5').contents().unwrap();

■デモ5

今回は5つデモを紹介しました。それぞれFirebugで削除されているか確認してみて下さい。

参考サイト:
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/143970370
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。