Add/remove Multiple Input Type="file" Without Losing Value

example with <ol> as parent.

<script type="text/javascript"><!--
var gFiles = 0;
function addFile() {
var li = document.createElement('li');
li.setAttribute('id', 'file-' + gFiles);
li.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile('file-' + gFiles + '')" style="cursor:pointer;">Remove</span>'
document.getElementById('files-root').appendChild(li);
gFiles++;
}
function removeFile(aId) {
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
}
--></script>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<ol id="files-root">
<li><input type="file" name="file[]">
</ol>

example using table:

<script type="text/javascript"><!--
var gFiles = 0;
function addFile() {
var tr = document.createElement('tr');
tr.setAttribute('id', 'file-' + gFiles);
var td = document.createElement('td');
td.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile('file-' + gFiles + '')" style="cursor:pointer;">Remove</span>'
tr.appendChild(td);
document.getElementById('files-root').appendChild(tr);
gFiles++;
}
function removeFile(aId) {
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
}

--></script>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<table><tbody id="files-root">
<tr><td><input type="file" name="file[]"></td></tr>
</table>

I did the ol one first then he said he wanted it as a table for some reason.. so here they are..