每次单击从数组中删除一个图像答案

【问题标题】：Remove one image from array per click每次单击从数组中删除一个图像
【发布时间】：2014-11-22 13:46:53
【问题描述】：

每次有人单击删除按钮时，我都想从数组中删除一张图像。我尝试使用 splice 方法，但我无法让它工作，因为在我单击删除按钮后图像仍然可见。

HTML：

<span>Image:</span>
<div id="image"></div>
<a class="remove" href="">Remove</a>

jQuery：

$(document).ready(function () {
    var image = new Array();
    for (i = 0; i < 5; i++) {
        image[i] = new Image();
        image[i].src = 'http://img3.wikia.nocookie.net/__cb20120809232434/fantendo/images/3/37/NSMBWii1upMushroom.png';
        $("#image").append($("<a>", {
            html: $("<img>", {
                src: image[i].src,
                height: 50
            })
        }));
    }

    $(".remove").click(function (e) {
        e.preventDefault();
        image.splice(-1, 1);
    });
});

JSFiddle Demo

【问题讨论】：

define doesn't work...它确实从数组中删除。不过，您没有要从 DOM 中删除的代码。数组的用途是什么？
我的意思是它不起作用是图像仍然可见。每次用户单击删除按钮时，如何从数组中获取要删除的一张图像？

标签： jquery html arrays append

【解决方案1】：

可以使用last()方法过滤子元素，使用remove()从DOM中移除

 $(".remove").click(function (e) {
    e.preventDefault();
    image.splice(-1, 1);
    $("#image").children().last().remove();
});

【讨论】：

splice(-1,1) 将删除数组的最后一项？
@EhsanSajjad 是的，试试吧

【解决方案2】：

您必须在容器中附加图像以及更新后的数组，创建一个函数并在每次从数组中删除项目后调用它：

function RefreshImages(images) {
        $("#image").empty()
        for (i = 0; i < images.length; i++) {
            images[i] = new Image();
            images[i].src = 'http://img3.wikia.nocookie.net/__cb20120809232434/fantendo/images/3/37/NSMBWii1upMushroom.png';

            $("#image").append($("<a>", {
                html: $("<img>", {
                    src: images[i].src,
                    height: 50
                })
            }));
        }
    }

在删除事件中这样调用它：

$(".remove").click(function (e) {
    e.preventDefault();
    image.splice(-1, 1);

    RefreshImages(image)
});

UPDATED FIDDLE

【讨论】：

【解决方案3】：

你需要做的是根据数组修改后的长度抓取索引并删除它：

$(".remove").click(function (e) {
    e.preventDefault();
    image.splice(0, 1);
    $('#image a').eq(image.length).remove();
});

Here's the jsFiddle

【讨论】：

这是否适用于当前 OP 在数组中使用相同图像的不同图像
@EhsanSajjad 如果你问它是否会从你拼接的 DOM 中删除完全相同的图像，不会。
@EhsanSajjad 是的，虽然 OP 没有指定这是必需的，但这里有一个模型可以用来删除正确的元素。 jsFiddle example here