jQueryでリストの子要素を削除


今回はリストを使って子要素の削除をしたかった。

まとめると、
each:マッチした全ての要素に対しある処理を実行させてくれる関数
remove:全ての要素をドキュメントから削除する
empty:各要素の子要素を全て削除し、空にする。

removeするとulの中身が全部消えてくれちゃう。
でもここは仕様的にリストにしないといけない。
むりやりliの中身をspanで囲ってひとまず解決。。。解決??
liタグ自体も消えてくれるのが一番いいんだけど。。。

HTML側がこんな感じ。

<ul id="hoge">
 <li id="a"><span>リストA<a href="#a">×</a></span></li>
 <li id="b"><span>リストB<a href="#b">×</a></span></li>
 <li id="c"><span>リストC<a href="#c">×</a></span></li>
 <li id="d"><span>リストD<a href="#d">×</a></span></li>
 <li id="e"><span>リストE<a href="#e">×</a></span></li>
</ul>

JSのソースがこっち

$(function(){
 var target = $("ul#hoge > li > span ");
 $(target).each(function(){
  ($(this).children()).click(
   function(){
    var listId = ($(this).attr('href'));//attrでhrefの中身取得
    $(listId).empty();//emptyで子要素の削除
    return false;
   }
  );
 });
});

追記:liごと削除する方法はこちら
jQueryでリストの子要素を削除【第2弾】

Posted in Web-tips by prolography at 10月 22nd, 2009 .
Tags:
海外現地オプショナルツアーなら【VELTRA(ベルトラ)】
ケンコーコム