jQuery淡出并移除LI元素。

Question

我有一个列表，每个LI元素上都有一个删除按钮。 当点击删除按钮时，使用淡出效果删除LI元素。

以下是我的代码。

<ul data-role="listview" data-inset="true" data-icon="false" class="recentList">
    <li>
        <a href="#" class="showDetail"> 
            <h2>  
                <p class="txtName">
                    Title 
                </p>  
            </h2>  
        </a> 
        <p class="expand">                
            Details
        </p>
        <button class="delete" data-inline="true">Delete</button>
    </li>
    <li>
        <a href="#" class="showDetail"> 
            <h2>  
                <p class="txtName">
                    Title 
                </p>  
            </h2>  
        </a> 
        <p class="expand">                
            Details
        </p>
        <button class="delete" data-inline="true">Delete</button>
    </li>
</ul>



<script>
$(".recentList").on('click', '.delete', function () {
                $(this).fadeOut(300, function(){ 
                $(this).parent().remove(); 
                });
        });
</script>

问题在于当我点击删除按钮时，LI元素没有淡出效果。

我该如何修复它？

这是演示 - http://fiddle.jshell.net/5zDVQ/

- user3400080

Answer 1

你实际上是想要淡出该 button，但你的目标是淡出父级的 li，因此你需要最初使用 closest，而不是使用 $(this)。

尝试：

    $(".recentList").on('click', '.delete', function () {
            var cache = $(this).closest('li');
            cache.fadeOut(300, function(){ 
               cache.remove(); 
            });
    });

DEMO

- Rajaprabhu Aravindasamy

---

@user3400080 很高兴能帮忙..！Q - Rajaprabhu Aravindasamy

Answer 2

你可以使用 fadeOut() 代替 remove()。

$(".recentList").on('click', '.delete', function () {
    $(this).fadeOut(300, function () {
        $(this).parent().fadeOut();
    });
});

更新的Fiddle

- Felix

---

用户说要删除该项，而不是隐藏它。 - andreszs

Answer 3

你可以尝试这个。

 $(".recentList").on('click', '.delete', function () {
     $(this).parent().fadeOut(300);
 });

基本上，与其逐个淡出，你只需将父元素进行fadeOut操作。

fiddle

- Rey Libutan

---

不错，但它只是将可见性更改为隐藏，并没有从DOM中删除该元素。 - andreszs

Answer 4

这里给出了淡出时间（以毫秒为单位），为了观察动画效果，您应该稍微增加一点时间。

同时，您可以对按钮进行特效处理并移除父元素，如果在父元素上应用特效，则效果更加明显。

这里是演示

 $(".recentList").on('click', '.delete', function () {
     $(this).parent().fadeOut(1000, function () {
         $(this).remove();
     });
 });

- Zaheer Ahmed