Как удалить элемент при клике?

Question

[glem1337]

Делаю мультизагрузку изображений. Реализую загрузку изображений через FileRider(). Изображения геренерируются нормально. Нужно сделать возможность удалять изображения.
1. Почему я не могу удалить элемент таким образом:

$('.remove').on('click', function(){
		$(this).parent('.preview').remove();
	});

2. Как удалять не только элемент, но и сам файл из загрузки, что бы на сервер не отправлялся удаленный файл?

Код мультизагрузки:

<div class="form-group">
							<label>Галерея изображений</label>
							<div class="row">
								<div class="col-lg-12">
									<div class="panel panel-default">
										<div id="outputMulti" class="panel-body">
										</div>
									</div>
								</div>
							</div>
							<div class="gallery-container">
								<div id="add-image-1" class="input-group">
									<input type="hidden" name="MAX_FILE_SIZE" value="5000000">
									<input id="multi-image" type="file" name="gallery_img[]" multiple>
								</div>
							</div>
		
						</div>

function handleFileSelectMulti(evt) {
						var files = evt.target.files; // FileList object
						document.getElementById('outputMulti').innerHTML = "";
						for (var i = 0, f; f = files[i]; i++) {

						// Only process image files.
						if (!f.type.match('image.*')) {
						alert("Только изображения....");
						}

						var reader = new FileReader();

						reader.onload = (function(theFile) {
						return function(e) {
					
						var span = document.createElement('span');
						span.className = "preview";
						span.innerHTML = ['<span class="remove fa fa-times"></span><img class="img-thumbnail" src="', e.target.result,
						'" title="', escape(theFile.name), '"/>'].join('');
						document.getElementById('outputMulti').insertBefore(span, null);
						};
						})(f);

						
						reader.readAsDataURL(f);
						}
						}


						document.getElementById('multi-image').addEventListener('change', handleFileSelectMulti, false);

Answer 1

[Ирина]

$(document).on('click', '.remove', function(){
    $(this).parent('.preview').remove();
  });

судя по html коду, элемент с классом remove у вас изначально при загрузке страницы не существует.
Поэтому то, как вы повесили обработчик по клику не работает - элемента в dom еще нет.