how to delete selected image from container

Question

how can it be possible to delete selected image from container? i want to delete one image at a time everything i have tried has been deleting all my images at the same time when i double click on an image here is a fiddle 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

this code is valid for jQuery < 1.7 .live()

add extra class for the added images called deleteme

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

    });

add a live listenre on deleteme class for double click and perform remove action

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

I think this is what you wanted

Answer 2

You are deleting all divs with the class 'closeDiv'. I think you should have one ID for each image you create. this way you can delete each image at a time.