JQuery disappears and removes the LI element

Question

I have a list and there is a delete button on every LI element. When you click the delete button, delete the LI element with the fade effect.

This is my code below.

<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>

The problem is that when I click the “Delete” button, the LI element does not get the “fade” effect.

How can I fix it?

here is DEMO - http://fiddle.jshell.net/5zDVQ/

Answer 1

You are actually trying to loosen button, but your goal is to correct the parent lito the right.? so first you should use closestinstead of using$(this)

Try

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

Demo

Answer 2

fadeOut() remove()

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

Fiddle

Answer 3

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

, , fadeOut

fiddle

Answer 4

here, when the decay time in milliseconds, to watch the animation, you have to increase a little.

You also give the effect to the button and delete the parent effect, the effect is more noticeable than you apply to the parent element.

Here is a demo

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