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でリストの子要素を削除【第２弾】
