How to clear file input element

Question

I have an application here where the user can add a row and it displays a file input.

I have 2 problems when trying to clear a file input:

Problem 1: If I add 2 rows in the application, if I fill both file inputs and I click on 'Click File' button in one of the rows, then instead of clearing the file within the row, it is clearing the file in all the rows which is incorrect, it should clear the file within the row I wanted to clear file on.

Problem 2: After I try uploading a file by clicking on "Upload" button, after uploading is succcessful or not, if I select another file and then try to clear it by clicking on 'Clear File', then it doesn't clear the file at all.

How can both of these problems be fixed:

<script type="text/javascript">
 var sourceImageForm; 

function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 


    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
    "<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><label>" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
    "(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label>" + 
    "<input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px;solclass #fff;'></iframe></form>");      

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr); 

      $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
});

}

function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}

function stopImageUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" type="file"/></label><br/><label>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');     
      return true;   
}

</script>

Answer 1

The below code will clear all file inputs present in the page as you are pointing to the class

 $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage'   
      />");
  });

replace with

$(".imageClear").click(function(event){
  event.preventDefault();
  $(this).closest(".fileImage").replaceWith("<input type='file' class='fileImage'    
    name='fileImage'/>");
  });

I hope it will work...

Answer 2

Problem 1 is caused by this line:

$(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

That means that when you click in any "Clear file" button all the elements that have the class "fileImage" are replaced, not only the one that belongs to the same form as the button. Replacing it with the following should work:

 $(this).parents("form:first").find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

Since what I'm doing with the jquery selector is, first selecting the form the button clicked belongs to, and then finding the "fileImage" element inside that form.