Question

我需要删除最后一个div并在点击“点击此处...”后添加一个新的div Check it at fiddle

$( document.body ).click(function() {
    $('#newsid div:last').fadeOut()
    $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

由于

Answer 1

使用fadeOut，您不会删除div，只会将其隐藏。

尝试更改

$('#newsid div:last').fadeOut()

的

$('#newsid div:last').remove()

Answer 2

通过说“只有一次”不确定你是否意味着这样的事情： http://jsfiddle.net/8FU7f/1/

var doOnce = true;
$( document.body ).click(function() {
    if(doOnce) {
        doOnce=false;
        $('#newsid div:last').fadeOut()
        $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first").fadeIn();
    }

});

Answer 3

您可以在callback function函数中添加fadeout作为参数：

    $('#newsid div:last').fadeOut(
      function(){
        this.remove();
      }
    );

Answer 4

简单：

$( document.body ).click(function() {
    $('#newsid div:last').fadeOut()
    $('#newsid div:last').remove()
    $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

问题是，如果你使用的是fadeOut（），总会有一个div：last，但是带有“display：none”属性。

Answer 5

$( document.body ).click(function() {
$('#newsid div:last').fadeOut(300, function(){$(this).remove()});;
$( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

上面已经解释了原因。 Fadeout不会删除它，我在淡出后在函数中包含了remove（）代码。

Answer 6

使用:visible selector，然后只使用:last selector，如下所示：demo

$( document.body ).click(function() {
    $('#newsid div:visible:last').fadeOut()
    $( "<div id='three'>test</div>" ).insertBefore( "#newsid div:first" ).fadeIn();
});

继续删除最后一个div

6 个答案: