Question

我想每次有人点击删除按钮时从数组中删除一个图像。我尝试使用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

Answer 1

您需要做的是根据数组修改后的长度获取索引并将其删除：

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

Here's the jsFiddle

Answer 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事件中以这种方式调用它：

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

    RefreshImages(image)
});

UPDATED FIDDLE

Answer 3

可以使用last()方法过滤子项并使用remove()从DOM中删除

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

每次单击从阵列中删除一个图像

3 个答案:

UPDATED FIDDLE