Как удалить динамически добавленный div?

Question

[georgich]

Приветствую всех!
Я совсем уже отчаялся, голова не варит и полное горе. Задача: необходимо динамически добавлять div, в котором будут содержаться img (для превью картинок) и input (для выбора этих самых картинок).

<div class="uploader">
	<div id="addPhotos" class="uploader-add js-upload-add">Добавить фото</div>
</div>

function addPhoto() {
	$(".uploader").before('<div class="preview js-preview column" style="display: none;"><img class="js-preview-img" src="" style="max-width: 100px; height: 75px;"><input type="file" name="photos[]" value="" id="photos" style="width: 100px; height: 75px; opacity: 0; position: relative; display: block; top: -79px;" accept="image/jpeg,image/jpg,image/png,image/gif"></div>');
	$('input#photos').last().click();
	previewPhoto();
}

function previewPhoto() {
	$('input#photos').on('change', function() {
		var previewImg = $(this).prev();
		var curFiles = $(this)[0].files;
		var previewDiv = $(this).parent();

		if (curFiles[0]) {
			previewImg.attr('src', window.URL.createObjectURL(curFiles[0]));
			previewDiv.removeAttr("style");
		} else {
			previewDiv.remove();
		}
	});
}
$(document).ready(function() {
	$(".js-upload-add").click(function() {
		addPhoto();
	});
	previewPhoto();
});

Как работает код: по клику на div addPhotos создается блок, внутри которого есть img и input и сразу после создания блока симулируется нажатие на кнопку выбора файла у input'а. Если файл выбран, то он отобразиться в превью, а если будет нажата отмена, то блок с превью и инпутом так и будет иметь свойство style="display: none;". Мне же необходимо, если файл не выбран, то удалять этот скрытый блок. Именно так у меня реализовано в previewPhoto(). А как сделать это в addPhoto() я уже за весь день всю голову сломал. Пытался сделать через событие onchange, но не выходит.
Помогите, пожалуйста! Спасибо!

Answer 1

[georgich]

В общем пошел другим путем. Сделал удаление блоков непосредственно перед отправкой данных на сервер:
$(".js-preview:hidden").remove();

Answer 2

[idin]

если я правильно понял то событием клик все решается.

Comments

[georgich]

Событием клик на что? Примерную структуру, хотя бы.

Answer 3

[Aligatro]

function addPhoto() {
	$(".uploader").before('<div class="preview js-preview column" style="display: none;"><img class="js-preview-img" src="" style="max-width: 100px; height: 75px;"><input type="file" name="photos[]" value="" id="photos" style="width: 100px; height: 75px; opacity: 0; position: relative; display: block; top: -79px;" accept="image/jpeg,image/jpg,image/png,image/gif"></div>');
	$('input#photos').last().trigger( "click" );
	previewPhoto();
}

Мне сложно понять что делает этот код без примера, но насколько я понял из вашего описание вы хотите эмулировать клик по элементу. Делается это при помощи .trigger( "click" ), просто .click() это listener на событие.

Детальнее в документации.

Comments

[georgich]

Спасибо за наводку. Клик-то по элементу эмулируется, как через триггер, так и через клик. Открывается окно выбора файла. Проблема в следующем: если пользователь нажал Отмена в этом окне и не выбрал файл, то добавленный <div class="preview js-preview column" ... остается в DOM, а мне надо его удалить, если файл не был выбран. Подскажете, куда копать после того, как был .trigger( "click" )? Спасибо!

Answer 4

[Exploding]

Может быть подойдет обработка oninput?