Question

如何从容器中删除所选图像？我想一次删除一张图片我所尝试过的所有图像同时删除了我的所有图像当我双击图像时这里是一个小提琴https://jsfiddle.net/4ezggt9h/8/

＆＃13;

--no-daemon

＆＃13;

jQuery(function ($) {
    $('div').on('click', '.closeDiv', function () {
        $(this).prev().remove();
        $(this).remove();
        $('#upload-file').val("");
    });
    var fileDiv = document.getElementById("upload");
    var fileInput = document.getElementById("upload-file");

    fileInput.addEventListener("change", function (e) {

        var filesVAR = this.files;

        showThumbnail(filesVAR);

    }, false);



    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)

        image.file = file;
        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);
        }
    }
});

＆＃13;

 .work-wrapper {
   display: block;
   width: 100%;
   position: relative;
 }
 
 .work-wrapper:after {
   content: "";
   clear: both;
   display: table;
 }
 
 .container {
   background-color: transparent;
   display: inline-block;
   width: 300px;
   height: 300px;
   border: 2px solid;
   position: relative;
   overflow: hidden;
   /* Will stretch to specified width/height */
   background-size: 490px 500px;
   background-repeat: no-repeat;
 }
 
 .control-wrapper {
   position: absolute;
   top: 0;
   left: 310px;
   width: 310px;
 }
 
 .control-wrapper h3 {
   padding: 0.2em .4em;
   margin: 0;
 }
 
 .button {
   background: #f0f0f0;
   border: 2px groove #e3e3e3;
   border-radius: 4px;
   color: #000000;
   display: block;
   font-family: Arial;
   font-size: 13px;
   line-height: 17px;
   text-decoration: none;
   text-align: center;
   padding: 0.2em 0.4em;
   margin: 3px 5px;
 }
 
 .upPreview {
   border: 2px groove #e0e0e0;
   border-radius: 6px;
   font-family: Arial;
   font-size: 13px;
   text-align: center;
   width: 100%;
   height: 142px;
   margin: 5px;
 }
 
 .upPreview span {
   display: block;
   width: 100%;
   border-bottom: 2px groove #e0e0e0;
   background: #e0e0e0;
 }
 
 .upPreview ul {
   width: 100%;
   background: #FFF;
 }
 
 .upPreview ul li {
   float: left;
   width: 90px;
   height: 110px;
   margin: 0.4em;
   text-align: center;
 }
 
 .upPreview ul li a {
   float: right;
 }
 
 .upPreview .icon {
   width: 80px;
   height: 80px;
   margin: 5px;
 }
 
 .hidden {
   display: none;
 }
 
 .button:hover {
   background: #f0f0ff;
 }
 
 .disabled {
   border: #606060;
   color: #606060;
 }

＆＃13;

Answer 1

此代码对jQuery＆lt; 1.7 .live()

为添加的名为deleteme

的图片添加额外的课程

var $drop = jQuery("<div>", {
        class : "dragbal deleteme",
        style : "position: absolute; top: 100px; left: 100px;",

    });

在deleteme课程中添加实时监听，以便双击并执行删除操作

$(function () {
    $(".deleteme").live("dblclick", function () {
        console.log('clicked delete')
        $(this).remove();
    });
});

我认为这就是你想要的

Answer 2

您正在删除所有包含＆＃39; closeDiv＆＃39;的div。我认为你应该为你创建的每个图像都有一个ID。这样你就可以一次删除每个图像。

如何从容器中删除所选图像

2 个答案: