Загрузка нескольких изображений с предварительным просмотром и удалением, Jquery и Javascript ⇐ CSS

[Anonymous]

У меня здесь проблема. У меня есть этот код с несколькими выбранными и предпросмотровыми изображениями, но мне нужно удалить выбранное изображение. Например, я выбираю 5 изображений для предварительного просмотра, и у меня есть предварительный просмотр, но одно из них мне не понравилось. Я хочу удалить выбранное изображение. Здесь я просто сбросил настройки, когда нажал удалить изображение. Со старым кодом (я добавил комментарий) я только что скрыл изображение, но не удалил. Я уже пытался найти решение здесь, но оно не работает.

Код: Выделить всё

 $(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("" +
"
[img]\[/img]
" +
"
Remove image" +
"").insertAfter("#files");

$(".remove").click(function(){
$(this).parent(".pip").remove();
$('#files').val("");
});

/*
$(".remove").click(function(){
$(this).parent(".pip").remove();
});*/

});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});

Код: Выделить всё

input[type="file"] {
display: block;
}

.imageThumb {
max-height: 75px;
border: 2px solid;
padding: 1px;
cursor: pointer;
}

.pip {
display: inline-block;
margin: 10px 10px 0 0;
}

.remove {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
}

.remove:hover {
background: white;
color: black;
}

Код: Выделить всё

Upload your images

Подробнее здесь: https://stackoverflow.com/questions/622 ... javascript