删除容器内的图像

Question

我想知道如何删除容器内的选定图像。

假设我已经在容器中上传了3张图片，我想要选择要删除的容器中的三张图片中的任何一张。如果可能，应双击删除图像。

这是fiddle。

function readURL(input) {
  if (input.files && input.files[0]) {
    console.log("Reading File.");
    var reader = new FileReader();
    reader.addEventListener("load", function(e) {
      if (jQuery("#preview-gallery li").length == 3) {
        input.value = "";
        return false;
      }
      var $imgP = jQuery("<img>", {
        class: "uploaded-image icon",
        src: reader.result
      });
      var $item = jQuery("<li>", {
        class: "ui-widget-content ui-corner-all hidden"
      });
      $item.append($imgP).append("<a href='#' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>");
      $item.appendTo(jQuery("#preview-gallery")).show("slow");
      makeDrag($item);
      updatePreviewCount();
    });
    if (input.files[0]) {
      reader.readAsDataURL(input.files[0]);
    } else {
      console.log(" Reader: File Not found.");
    }
    input.value = "";
  }
}

function renderContent() {
  html2canvas(jQuery("#firstshirt"), {
    allowTaint: true,
    logging: true
  }).then(function(canvas) {
    jQuery("#previewImage").append(canvas);
    jQuery("#download").css("display", "inline");
    jQuery("#download").attr("href", jQuery("#previewImage")[0].children[0].toDataURL());
  });
}

function makeDrag(o) {
  o.draggable({
    helper: "original",
    revert: "invalid",
    zIndex: 999
  });
}

function makeResize(o) {
  o.resizable();
}

function addImage($item, $pos) {
  console.log("  Fade Item Out");
  $item.fadeOut();
  var $img = $item.find("img");
  $img.css("width", "80px").css("height", "80px");
  $item.remove();
  updatePreviewCount();
  console.log("  Making new Wrap");
  var $drop = jQuery("<div>", {
    class: "dragbal",
    style: "position: absolute; top: 100px; left: 100px;"
  });
  $drop.append($img);
  console.log($drop);
  console.log("  Appending to #boxes");
  $drop.appendTo(jQuery("#boxes")).fadeIn();
  $drop.draggable({
    containment: "#boxes"
  });
  makeResize($drop.find("img"));
}

function updatePreviewCount() {
  var cnt = jQuery("#preview-gallery li").length;
  jQuery(".upPreview span").html(cnt + "/3");
}

jQuery(download).ready(function() {
  // Setup
  jQuery(".file-upload-wrapper").hide();
  jQuery(".out-put-img").hide();
  jQuery('.smallimages').hide();

  makeDrag(jQuery("[id$='-gallery'] ul li"));

  jQuery("#boxes").droppable({
    accept: ".gallery > li",
    drop: function(e, ui) {
      console.log("Drop Pos:", ui.offset);
      addImage(ui.helper, ui.position);
    }
  });