How to clear file input element
<p>I have an application <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/QandATable2.php" rel="nofollow">here</a> where the user can add a row and it displays a file input.</p>

<p>I have 2 problems when trying to clear a file input:</p>

<p>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.</p>

<p>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.</p>

<p>How can both of these problems be fixed:</p>

<pre><code>&lt;script type="text/javascript"&gt;
 var sourceImageForm; 

function insertQuestion(form) {   

    var $tbody = $('#qandatbl &gt; tbody'); 
    var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;&lt;/tr&gt;");
    var $image = $("&lt;td class='image'&gt;&lt;/td&gt;"); 


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

    $image.append($fileImage);

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

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

}

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

&lt;/script&gt;
</code></pre>
