i have five input type file to choice image for upload,but when i click remove one image all image was delete,i just want to delete one image that i click
<body>
<table>
<tr>
<td>
<img id="uploadPreview1" src="no_image.jpg" /><br />
<input id="uploadImage1" type="file" name="p1" onchange="PreviewImage(1);" />
<a href="" onClick="delete(1)">Remove</a>
</td>
<td>
<img id="uploadPreview2" src="no_image.jpg" /><br />
<input id="uploadImage2" type="file" name="p2" onchange="PreviewImage(2);" />
<a href="" onClick="delete(1)">Remove</a>
</td>
<td>
<img id="uploadPreview3" src="no_image.jpg" /><br />
<input id="uploadImage3" type="file" name="p3" onchange="PreviewImage(3);" />
<a href="" onClick="delete(1)">Remove</a>
</td>
<td>
<img id="uploadPreview4" src="no_image.jpg" /><br />
<input id="uploadImage4" type="file" name="p4" onchange="PreviewImage(4);" />
<a href="" onClick="delete(1)">Remove</a>
</td>
</tr>
</table>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function delete(no) {
document.getElementById("uploadImage"+no).value = "";
}
</script>
<script type="text/javascript">
function PreviewImage(no) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
};
}
</script>
</body>
