jQueryでリストの子要素を削除【第2弾】


3年前くらいに書いたjQueryでリストの子要素を削除の記事。

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

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

らしいけど、特に解決策が書かれていないみたいだからちょっと加工。
加工しただけだからソースは軽く適当だけどこんな感じでli削除できますよ的な。

html側がこんな感じで

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

jsがこんな感じ。


$(function(){
 var target = $("ul#hoge > li ");
 $(target).each(function(){
  ($(this).children()).click(
   function(){
    var listId = ($(this).attr('href'));//attrでhrefの中身取得
    $(listId).remove();//removeでhrefで取得したIDのついたli削除
    return false;
   }
  );
 });
});

これでliごと削除できる。
analyticsを見る限り、たぶんliごと削除したい人が多いんだよね。
3年前に書いたときに何をremoveしてulの中身がごっそり消えたんだろ。

removeすれば消えるのに・・・

確か、なんかの管理画面側だから見えなくなればおkみたいな仕様で
liが消えなくても中身が消えれば問題ないってことでそのままになったんだろうけど。
ムダにspanでかこってるとか気持ち悪いから書き直したかったってだけ。
ずっと書き直そうと思って3年近く経過して今に至ったわけだけど、
明日も早いから、jsはとりあえず前回の記事の使い回し。
liを削除するように書き換えただけなので、仕様次第では使えないかもしれないですが。。。

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