删除一个 <li> 按下跨度时

Question

我正在尝试淡出一些<li> ，但是没有运气。 检查我的代码如下：

<li class="lclass" id="1">
    First Li
    <span class="removeit" id="1" style="color:#C00;">Remove</span>
</li>
<li class="lclass" id="2">
    First Li
    <span class="removeit" id="2" style="color:#C00;">Remove</span>
</li>
<li class="lclass" id="3">
    First Li
    <span class="removeit" id="3" style="color:#C00;">Remove</span>
</li>

在我的代码中，只有span class="removeit"淡出。 当我按下删除按钮时，我想淡出整个div。

$(document).ready(function() {
    $('.removeit').click(function () {
        $(this).hide("fast");   
    });
});

谢谢！

Answer 1

使用.parent()或.closest('li')来获取父级li，然后隐藏整个对象。

 $(document).ready(function() {
   $('.removeit').click(function () {
     $(this).parent().hide("fast");  //or $(this).closest('li').hide("fast");
   });
 });

工作演示

Answer 2

您可以使用.parent（）或.closest（）来获取父li元素，然后可以使用fadeOut淡出匹配的li ：

$('.removeit').click(function () {
    $(this).closest('li').fadeOut();   
});

小提琴演示

---

另外，您应该使用class而不是id，因为id是唯一的：

<li class="lclass 1">
<span class="removeit 1" style="color:#C00;">

除此之外，号码是不是有效的id ，您可以使用li1 ， li2 ， span1 ， span2 ...而不是：

<li class="lclass span1">
<span class="removeit span1" style="color:#C00;">