添加后删除最后一个元素

Question

我有以下内容，其中 #maincontent 包含一些将加载到 #gallery 中的图像。现在的问题是，如果我多次单击 #maincontent img 并将不同的图像加载到 #gallery，加载就会变得越来越拖沓。是不是因为当我点击下一张图片时，它只是在上一张图片之上，而图片只是随着时间的推移堆积起来？我对 .append() 和 .last() 不是很熟悉，我只是想知道如何在加载最新图像后删除之前加载的图像。我试过 $('img:last-child', this).remove() 但它似乎不起作用，所以我只是想知道我是否在正确的轨道上。

$('#maincontent img').click(function(){
    $myFile = $(this).attr('src');
    $('#gallery').append('<img src="'+$myFile+'" />');
    $('#gallery img').last().css('display','none').fadeIn();

Answer 1

.append 只需在 #gallery 内逐个添加图像，稍后您只需使用代码隐藏最后一张图像。这意味着您的页面将加载所有图像，但您只显示最后一张。

但是，如果您只想显示最新的图像，您可以清除 #gallery 并添加新图像：

 $('#content').find('img').removeClass('lastitem');//we will add this class to the new image item, so we clear it from the previous images if any

var $image = $('<img class="lastitem"  src="http://armagetron.co.uk/mods/images/sky1.png" />');
$image.hide();//hide the image first
$('#content').append($image);//append the hidden image 

$image.fadeIn(800, function () {//show the image, when it is shown, hide the rest of it 
    $('#content').find('img').not('.lastitem').fadeOut(500, function () {
        $(this).remove();
    });
});

演示：https://jsfiddle.net/erkaner/ma6LjfkL/1/

第二种方法：.prevAll

 $('a').click(function () {
    var $image = $('<img class="lastitem"  src="http://armagetron.co.uk/mods/images/sky1.png" />');
    $image.hide();
    $('#content').append($image);

    $image.fadeIn(800, function () {
       $image.prevAll().fadeOut(500, function () {
          $(this).remove();
       });
    });
 })

演示：http://jsfiddle.net/erkaner/ma6LjfkL/1/

添加后删除最后一个元素

Remove last element after append

jquery

element

image

append