Image upload with preview Javascript

I found the code from Image Upload with preview and Delete option - Javascript / Jquery which allows a user to select multiple images and preview them before submission, but I want a user to be able to delete the selected image in preview(file) not hiding the Div. So far it hides the div not deleting the selected file. How can I fix this?

Html

<input "multiple="multiple" id="files" name="photos[]" type="file">

Script

 $(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\">Remove image</span>" +
        "</span>").insertAfter("#files");
      $(".remove").click(function(){
        $(this).parent(".pip").remove();
        $('#files').val("");
      });


      // 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("Your browser doesn't support to File API")
 }
});