How to clear individual file inputs?
<p>Below is part of the jquery code I have which displays the file input and a "Clear File" button.</p>

<pre><code>var $imagefile = $('&lt;input /&gt;')
    .attr({
        type: 'file',
        name: 'imageFile',
        class: 'imageFile'
    });

$image.append($imagefile);

var $imageclear = $('&lt;input /&gt;')
    .attr({
        type: 'button',
        name: 'imageClear',
        class: 'imageClear',
        value: 'Clear File'
    });

$(".imageClear").click(function(event){
  event.preventDefault();
  $(".imageFile").replaceWith("&lt;input type='file' class='imageFile' /&gt;");
});
</code></pre>

<p>Now if you look at the bottom of the jquery code, it shows a function I am using where if the user clicks on the "Clear File" button, it replaces the file input so that if you have chose a file but then want to clear the input, then it does this by replacing the input.</p>

<p>The problem though is that lets say I have two "imageFile" inputs (each file input contains its own "Clear File" button" and they both contain a file, then lets say I want to clear the first file input only, when I click on the "Clear File" button, it clears both file inputs, even though I only want it to clear one file input. So how do I code it so that each "Clear file" button only clears the file input it belongs to?</p>
