So löschen Sie das ausgewählte Bild aus dem Container

Question

Wie kann das ausgewählte Bild aus dem Container gelöscht werden? Ich möchte ein Bild zu einer Zeit, alles löschen ich versucht habe wurde zur gleichen Zeit alle meine Bilder zu löschen, wenn ich Sie auf ein Bild verdoppeln hier ist eine Geige https://jsfiddle.net/4ezggt9h/8/

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); 
 
     } 
 
    } 
 
});

.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; 
 
}

<div class="work-wrapper"> 
 
    <div id="firstshirt" class="container"> 
 
    <div id="boxes" class="container"> 
 
     <img id="img-1" src="https://torcdesign.com/shirts/brown.jpg" /> 
 
    </div> 
 
    </div> 
 
    <div class="control-wrapper"> 
 
    <h3>Controls</h3> 
 
    <a id="btn-Preview-Image" class="button">Preview</a> 
 
    <a id="download" download="my_image.png" class="button disabled" href="#">Download Image</a> 
 
    <select id="imajes45"> 
 
     <option value="">Choose Source</option> 
 
     <option value="new-upload">Upload Images</option> 
 
     <option value="select-item">Select Item</option> 
 
    </select> 
 
    <div class="file-upload-wrapper" id="draggableHelper" style="display: none;"> 
 
     <input type="file" class="upload-img" name="file1" id="upload-img-1" /> 
 
     <div id="upload-preview" class="small upPreview"> 
 
     <span>0/3</span> 
 
     <ul id="preview-gallery" class="gallery ui-helper-reset ui-helper-clearfix"> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <select name="subselector" class="file-select" style="display: none;"> 
 
     <option value="">Choose Gallery</option> 
 
     <option value="bulldog">Bulldogs</option> 
 
    </select> 
 
    <div id="bulldog-gallery" class="upPreview hidden"> 
 
     <ul class="gallery ui-helper-reset ui-helper-clearfix"> 
 
     <li class="ui-widget-content ui-corner-all"><img src="https://torcdesign.com/clipart/pT78gE6pc.gif" class="icon" /></li> 
 
     <li class="ui-widget-content ui-corner-all"><img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" class="icon" /></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<h3>Result:</h3> 
 
<div> 
 
    <div id="previewImage"></div> 
 
</div>

Answer 1

dieser Code ist gültig für jQuery < 1,7 .live()

für die hinzugefügten Bilder Extraklasse hinzufügen deleteme genannt

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

    }); 

eine Live-listenre für einen Doppelklick auf deleteme Klasse hinzufügen und führen Sie entfernen Aktion

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

Ich denke, das ist, was Sie wollten

Answer 2

Sie sind Löschen aller divs mit der Klasse 'closeDiv'. Ich denke, du solltest für jedes Bild, das du erstellst, eine ID haben. Auf diese Weise können Sie jedes Bild auf einmal löschen.