如何刪除圖標添加到圖像附加

Question

我附上圖片到我的div使用該代碼：

$(function() { 

var imagesPreview = function(input, placetoinsert) { 

    if (input.files) { 
     var filesAmount = input.files.length; 

     for (i = 0; i < filesAmount; i++) { 
      var reader = new FileReader(); 
      if (i>=5) { 
       break; 
      } 
      reader.onload = function(event) { 
       $($.parseHTML('<img>')).attr('src', event.target.result).appendTo('.preview').addClass('added_images'); 

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

$('#gallery-photo-add').on('change', function() { 
    imagesPreview(this, 'div.gallery'); 
}); 
}); 

圖片我從輸入文件場得到我的觀點。現在我想爲每個圖像添加另一個圖像，如「刪除」。 ？我該怎麼辦，我的DIV現在是空的：

<div class="preview"> 

      </div> 

Answer 1

我會簡單地創建所需的HTML，而只使用這樣的事：

$($.parseHTML('<div class="someClass">close</div>')).appendTo('.preview'); 

然後就是聽

$('.someClass').click(function(){ 
    // do stuff 
}); 

Answer 2

如果您希望關閉圖標/按鈕是可點擊的，您可能需要用div來包裝圖片，然後添加一個按鈕，然後使用CSS進行樣式設計。

這裏的示例：

var imagesPreview = function(input, preview) { 
 

 
    if (input.files) { 
 
    var filesAmount = input.files.length; 
 

 
    for (i = 0; i < filesAmount; i++) { 
 
     var reader = new FileReader(); 
 
     if (i >= 5) { 
 
     break; 
 
     } 
 
     reader.onload = function(event) { 
 
     var img = "<img src='" + event.target.result + 
 
      "'>", 
 
      height = $($.parseHTML(img))[0].naturalHeight, 
 
      width = $($.parseHTML(img))[0].naturalWidth, 
 
      imgSpan = "<div style='height:" + height + 
 
      "px;position: relative;width: " + width + 
 
      "px;'><button class='btn-close'>X</button>" + img + 
 
      "</div>"; 
 

 
     $($.parseHTML(imgSpan)).appendTo(preview); 
 
     } 
 
     reader.readAsDataURL(input.files[i]); 
 
    } 
 
    } 
 
}; 
 

 
$('#btn-gllry-add').on('change', function() { 
 
    imagesPreview(this, 'div.gallery'); 
 
}); 
 

 
$(document).on('click', '.btn-close', function() { 
 
    $(this).parent().remove(); 
 
    $('#btn-gllry-add').val(""); 
 
});

.btn-close { 
 
    background-color: #5a5a5a; 
 
    border: 0; 
 
    border-radius: 999px; 
 
    color: #fff; 
 
    height: 2em; 
 
    line-height: 1em; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 2em; 
 
} 
 

 
.btn-close:link, 
 
.btn-close:visited, 
 
.btn-close:hover, 
 
.btn-close:active { 
 
    background-color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<label>Upload Image: </label> 
 
<input id="btn-gllry-add" type="file" name="file"/> 
 
<div class="gallery"></div>

也更新.appendTo(preview);所用的傳遞的參數。以前您的代碼沒有使用placetoinsert（在我的示例中重命名爲預覽），因爲.preview是硬編碼的。