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弾】