jquery - fadeOut doesn't remove the elements

Question

I have three of li:

<li id="234-sg-235"><div><a></a></li>
<li><div><a></a></li>
<li>
    <div>
        <a>Don't show again</a>
    </div>
</li>

it seems something like:

while the user presses don't show again, I want to remove these li-s after 3 seconds.

so I need only the code which removes them.

I tried three things:

1)

$(this).parent('div').parent('li').fadeOut(3000);
$(this).parent('div').parent('li').prev().fadeOut(3000);
$(this).parent('div').parent('li').prev().prev().fadeOut(3000);

2)

var notificationId = $(this).parent('div').parent('li').prev().prev().attr("id");
$(this).parent('div').parent('li').fadeOut(3000);
$("#" + notificationId).next().fadeOut(3000);
$("#" + notificationId).fadeOut(3000);

3)

$(this).parent('div').parent('li').fadeOut(3000, function () {
    $(this).parent('div').parent('li').remove();
});

$(this).parent('div').parent('li').prev().fadeOut(3000, function () {
    $(this).parent('div').parent('li').prev().remove();
});

$(this).parent('div').parent('li').prev().prev().fadeOut(3000, function () {
    $(this).parent('div').parent('li').prev().prev().remove();
});

but the result is (the first li was deleted and the others got: display:none):

<li style="display: none"><div><a></a></li>
<li style="display: none">
    <div>
        <a>Don't show again</a>
    </div>
</li>

why these li-s were not deleted? why the first li is only deleted?

any help appreciated!

Answer 1

it should be

$('ul a').click(function(){
    $(this).closest('li').prevAll(':lt(2)').addBack().fadeOut(3000, function () {
        $(this).remove()
    });
})

Demo: Fiddle

Answer 2

var lis = $(this).closest('li').siblings('li').addBack();
lis.fadeOut(3000,function () {
  lis.remove();
});

or,

(assuming ul is parent of li)

 $(this).closest('ul').find('li').fadeOut(3000,function () {
   $(this).remove();
 });

Answer 3

After

$(this).parent('div').parent('li').remove();

in the next call

$(this).parent('div').parent('li')

is already removed. You should reverse the order in which you remove the three li's.

Edit: Better solution:

$(this).parent('div').parent('li').add($(this).prev().add($(this).prev()).fadeout(3000, function() {
    $(this).remove();
});

Answer 4

You could try the following:

<li id="234-sg-235"><div><a>first li</a></li>
<li><div><a>second li</a></li>
<li>
    <div>
        <a href="#" id="dontshow">Don't show again</a>
    </div>
</li>

$('#dontshow').on('click', function(){
   $("li:has('a')").fadeOut(3000, function () {
        $(this).remove()
    });
});

JSFiddle