THE HAM MEDIA BLOG

上の図にしたように、子要素を持つ親要素のみを削除したいとき、
jQueryを使って表現するにはどうしたらいいんだろう？
なんてのを悩んで結局できなかった。

とりあえずためしたものをメモエントリーとして書いておく。

2009/02/18修正

できなかった例

一応使用HTML

■HTML

<a href="#damy"><span>ダミーテキスト</span></a>

これにJavaScriptを適応させて、
リンクが外れていたら成功になる。

失敗だと、上のようなままか、もしくは中身が消失する。

当然remove()は中まで消える

■スクリプト

$(function(){
  $('a[href*="damy"]').remove();
});

ちなみに、$('a[@href*="damy"]')の部分はa要素のリンク先のURLで
「damy」の文字を含んでいるリンクを対象とするという指定です。

■プレビュー

.remove()は、指定した要素自体とその子要素をすべて削除するので、
中身もろとも消えてしまうことになる。

replaceWithも同じか

■スクリプト

$(function(){
  $('a[href*="damy"]').replaceWith($(this).html());
});

■プレビュー

これも中身ごと消失。うーむ。
指定のしかたがよくなさそう。

replaceWithの使い方かな？

上記の例だと、要素に直接.replaceWith()をつけてみたけど、
どうもこれだと挙動がおかしい。next()をはずしてhtml()をtext()にしたところ、
全体の文字情報が表示されてしまった。
つまり指定がよくなさそう。
なので、一つずつに適応するようにeachを使ってみる。

■スクリプト

$(function(){
  $('a[href*="damy"]').each(function(){
  	$(this).replaceWith($(this).html());
  });
});

■プレビュー

おっ、消えた！！

eachを使うようにしないとだめなようだ。
これは応用がききそうなので、覚えておくようにしよう。

◎ 余談

実はこのエントリーを書くまではeachなんて使うこと浮かばずストップ。
ひらめきが足りずに、できないまま悩んでいた。
で、text()なんてのを試したときに、ページ全体のテキストが出てきて
それでひらめいた！いろいろためしてみるもんですね。