fadeOut不会删除元素

Question

我有三个李：

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

看起来像是这样的：

当用户按下don't show again时，我想在3秒后删除这些li-s。

所以我只需要删除它们的代码。

我尝试了三件事：

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();
});

但结果是（第一个li被删除，其他的被删除：display:none）：

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

为什么这些li-s没有被删除？为什么第一个李只被删除？

任何帮助表示赞赏！

Answer 1

应该是

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

演示：Fiddle

Answer 2

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

，或者

（假设ul是li的父级）

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

Answer 3

在

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

在下次通话中

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

已被删除。您应该撤消删除三个li的顺序。

修改：更好的解决方案：

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

Answer 4

您可以尝试以下方法：

<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