Как удалить из массива превью фото Java Script

Есть прекрасно работающий скрипт.

 <div class="field" align="left">
 
        <input type="file" id="files" name="files[]" multiple />

  </div>      
     
    <input type="submit" name="submit" value="Загрузить"> 

 $(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;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Удалить</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
             $('#photo').get(0).reset();
          });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Ваш браузер не поддерживает File API")
  }
});

Он выводит превью фотографий перед загрузкой, и при этом если пользователь ошибся с загрузкой какого-то изображения, позволяет удалить одно из превью.

Проблема в следующем, я загружаю допустим 2 картинки, они показаны в превью, удаляю 1 картинку, остается одна, нажимаю отправить данные на сервер, а в $_POST приходит обе картинки, помогите решить вопрос, как сделать чтобы при удалении превью картинки, она также очищалась и не отправлялась при нажатии на submit на сервер.