Предварительный просмотр нескольких изображений и удаление

Question

HTML

У меня есть следующий HTML код для результатов предварительного просмотра

 <div class="gallery"></div>

JS

Эта javascript функция кода предназначена для сделать несколько предварительных просмотров изображений.

Но я не знаю, как сделать код для удаления каждого предварительного просмотра фотографий

 $(function() {

  var imagesPreview = function(input, placeToInsertImagePreview) {

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

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

            reader.onload = function(event) {
              $($.parseHTML('<img>')).attr('src', event.target.result).attr('class','prevImage').appendTo(placeToInsertImagePreview);   
            }

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

  };

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

Answer 1

Посмотрите на JSFiddle: https://jsfiddle.net/2e6br85s/

То, что я сделал:
1) Добавлена ​​оболочка div для предварительного просмотра изображения.
2) Затем после добавления тега привязки «Удалить» внутри этой оболочки. Создана функция удаления полного div-обертки всякий раз, когда пользователь нажимает на тег привязки «Remove».

JS Код:

$(function() {
  var imagesPreview = function(input, placeToInsertImagePreview) {
      if (input.files) {
        var filesAmount = input.files.length;

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

            reader.onload = function(event) {
              var imgElement = $($.parseHTML('<img>')).attr('src', event.target.result).attr('class','prevImage').appendTo(placeToInsertImagePreview);
              imgElement.wrap('<div class="img-preview col-md-4"></div>');
              imgElement.parent().append('<p><a class="remove-image-preview" href="javascript:void(0);">Remove</a></p>');
            }

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

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

  $(document).on('click', 'a.remove-image-preview', function(){
    $(this).closest('.img-preview').remove();
  });
});