如何刪除克隆的輸入字段 jQuery

Question

如果用戶在選擇文件按鈕上單擊兩次以防止該字段清除以前上傳的圖像，我創建了一個 function 來克隆輸入文件

$(function() {

 // Multiple images preview with JavaScript
var multiImgPreview = function(input, imgPreviewPlaceholder) {

    if (input.files) {
     $("#multipleImageUpload").on("change", function(e) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();

            reader.onload = function(event) {
                $($.parseHTML("<span class=\"pip\">" + 
                "<br/><span id=\"remove_icon\">Remove</span>" +
                "<img src=\"" + event.target.result + "\" title=\"" + "\"/>" +
                "</span>")).appendTo(imgPreviewPlaceholder);
 
                $("#remove_icon").click(function(){
                   $(this).parent(".pip").remove();
                 }); 
            }

            reader.readAsDataURL(input.files[i]);
        }
      });
    }
};


$(document).on('click', '#multipleImageUpload', function() {
    
    // add to preview
    multiImgPreview(this, 'div.imgPreview');

    
    //clone
    
    var originalInput = $(this), cloned = originalInput.clone();
    
    // move
    originalInput.attr("id", Date.now());
    originalInput.removeClass('multipleImageUpload');
    originalInput.appendTo($('#multipleFilesPH'));
    
    cloned.attr("id", "multipleImageUpload");
    cloned.insertAfter($('#multipleFilesPH'));

    originalInput = null;
    cloned = null;

});
});  

這里的問題是當用戶點擊刪除按鈕時，它只會從視圖中刪除圖像，而上傳的文件不會被刪除並被發送到服務器。 知道我在這里做錯了什么嗎？

Answer 1

有兩種基本方法可以做到這一點。

1. 使用.on()綁定到動態元素
2. 在變量中存儲對 object 的引用，並將click()回調分配給 object

這是后者的一個例子。

$(function() {

  // Multiple images preview with JavaScript
  var multiImgPreview = function(input, imgPreviewPlaceholder) {

    if (input.files) {
      $("#multipleImageUpload").on("change", function(e) {
        var filesAmount = input.files.length;

        $.each(input.files, function(i, file){
          var reader = new FileReader();

          reader.onload = function(event) {
            var pip = $("<span>", {
              class: "pip"
            }).appendTo(imgPreviewPlaceholder);
            var icon = $("<span>", {
              class: "remove_icon"
            }).html("Remove").insertAfter(pip);
            var img = $("<img>", {
              src: event.target.result,
              title: ""
            }).insertAfter(icon);
            
            icon.click(function() {
              $(this).parent(".pip").remove();
            });
          }

          reader.readAsDataURL(file);
        }
      });
    }
  };

  $(document).on('click', '#multipleImageUpload', function() {

    // add to preview
    multiImgPreview(this, 'div.imgPreview');

    //clone
    var originalInput = $(this),
      cloned = originalInput.clone();

    // move
    originalInput.attr("id", Date.now());
    originalInput.removeClass('multipleImageUpload');
    originalInput.appendTo($('#multipleFilesPH'));

    cloned.attr("id", "multipleImageUpload");
    cloned.insertAfter($('#multipleFilesPH'));

    originalInput = null;
    cloned = null;

  });
});

這使用 jQuery 能力從提供的原始字符串 HTML 動態創建 DOM 元素。 查看更多。

如果您想將點擊回調綁定到該特定元素，您可以將生成的 Object 存儲在一個變量中，並使用它來將事件單獨綁定到該 object。

我將屬性切換為 Class，因為您可能有超過 1 個元素具有此 ID，因此它與其他元素不同的原因。 您最終可能會得到 3 或 4 個具有相同 ID 的元素。