javascript - 为每个图像缩略图预览添加删除按钮

Question

我想在每个缩略图旁边放一个小叉，以便能够将它们一个一个地删除。我可以通过单击来删除图像，但我希望有单独的按钮“x”来删除它。

fileInput.addEventListener("change", function (e) {

        var filesVAR = this.files;

        showThumbnail(filesVAR);

    }, false);



    function showThumbnail(files) {
        var file = files[0]

        var image = document.createElement("img");
        var thumbnail = document.getElementById("thumbnail");
        image.file = file;

        image.setAttribute('class', 'imgKLIK5');
        thumbnail.appendChild(image)

        var reader = new FileReader()
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        }(image))
        var ret = reader.readAsDataURL(file);
        var canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        image.onload = function () {
            ctx.drawImage(image, 100, 100);
        }
    }
});

这是我在 JFIDDLE 中的代码

你能帮帮我吗？

Answer 1

查看带有关闭按钮的示例:http://jsfiddle.net/kevalbhatt18/r0taz01L/1/

 $('div').on('click', '.closeDiv', function () {
        $(this).prev().remove();
        $(this).remove();
        $('#upload-file').val("");
    });

我在您的 showThumbnail 函数中进行了此更改

 function showThumbnail(files) {
        var file = files[0]
        var thumbnail = document.getElementById("thumbnail");
        var pDiv = document.createElement("div");
        var image = document.createElement("img");
        var div = document.createElement("div");


        pDiv.setAttribute('class', 'pDiv');
        thumbnail.appendChild(pDiv);


        image.setAttribute('class', 'imgKLIK5');
        pDiv.appendChild(image)

        div.innerHTML = "X";
        div.setAttribute('class', 'closeDiv');
        pDiv.appendChild(div).......
        ...................