title: How to delete the file(images) from the list?
body: <p>I have a module that uploading image files to the server. Now I am trying to add preview and delete function to that before uploading to the server. When I press Remove,  it removes from previews, but the image files still stay in the list and will be uploaded to the server when I press the Upload button. How to remove that files from the list too?</p>
  
  <p>This is html part</p>
  
  <pre><code>&lt;form action="&lt;?php echo $_SERVER['PHP_SELF'] ?&gt;"  method="post" 
    enctype="multipart/form-data"&gt;
  &lt;input type="file" id="file" name="file[]" multiple /&gt;
  &lt;p&gt;&lt;div id="image-holder"&gt;&lt;/div&gt;&lt;/p&gt;
  &lt;input type="submit" name="upload" value="Click to upload file"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>here is jquery part</p>
  
  <pre><code>var abc = 0; 
  $(document).ready(function() {  
  if (window.File &amp;&amp; window.FileList &amp;&amp; window.FileReader) {
  $("#file").on("change", function(e) {
    var files = e.target.files,  
    filesLength = files.length;
    var image_holder = $("#image-holder");
    abc += 1; 
    var z = abc - 1;
  
    for (var i = 0; i &lt; filesLength; i++) {
      var f = files[i]
      var fileReader = new FileReader();
      fileReader.onload = (function(e) {
        var file = e.target;
  
        $("&lt;span class=\"pip\" id='abcd" + abc + "'&gt;" +
          "&lt;img class=\"imageThumb\" src=\"" + e.target.result + "\" alt=\"" + file.name + "\" +title=\"" + file.name + "\"/&gt;" +
          "&lt;br/&gt;&lt;span class=\"remove\"&gt;Remove&lt;/span&gt;" +
          "&lt;/span&gt;").appendTo(image_holder);
         $(".remove").click(function(){
          $(this).parent(".pip").remove();
                   });             
      });
      fileReader.readAsDataURL(f);
    }
  });
  } 
  });
  </code></pre>
  
  <p>I think It's sort of same problem if I add another file, it will only upload the last file only not including previously selected files.</p>