How to clear a file input
<p>if you look at this code carefully, it appends a file input for each appended row. Now with every file input there is a "Clear File" button where it is suppose to remove whatever is in the file input. The problem is that it is not clearing anything in the file iput. Why is this and how can it 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();
  $(this).parent().find(".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;   
}
</code></pre>
