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/

Answer 1

您实际上是在尝试淡出按钮，但您的目标是淡出父li，对吗？所以你必须首先使用 closest 而不是使用 $(this)

尝试，

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

DEMO