はどのように付加した画像

Question

私はこのコードで私のdivに画像を追加するには、削除アイコンを追加します。そして今、私は各画像のために「削除」のような別の画像を追加したい。どのように私はそれを行うことができます私の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を使用してスタイリングする必要があります。

ここでは例：また、渡されたパラメータを使用する.appendTo(preview);を更新

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>

。以前は、placetoinsert（私の例ではプレビューに名前を変更しました）を使用していませんでした。.previewはハードコードされています。