Q:

Can not dynamically remove input element from form

Here is the JSFiddle http://jsfiddle.net/T8fUY/
A very simple situation. Add input fields dynamically and also remove them if necessary. I've seen countless examples but I can't get the remove function to work. Here is my HTML:
<ol> 
    <li id="caseform-FileUploader">
        <input type="button" id="caseform-AddFile" value="Add File"> 
        <ul>
        </ul>
    </li>
</ol>

Here is my JQuery:
var filenumber = $('li#caseform-FileUploader ul li').size() + 1; // set which file number this is

$("#caseform-AddFile").click(function () {
    //add the input within the ul that is in #caseform-FileUploader
    $('<li><input type="file" name="upload' + filenumber + '"/> <a href="#" id="caseform-RemoveFileUpload">Remove</a></li>').appendTo("#caseform-FileUploader ul");
    filenumber++;
    return false;
});

//When the hyperlink is clicked, remove this parent li
$('#caseform-RemoveFileUpload').on('click', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

It adds inputs perfectly fine.... but the remove function is not working when a user clicks on the remove hyperlink. 
Can anyone please assist?

A:

You need to use event delegation for dynamically created elements. You need to pass nearest static container.
//When the hyperlink is clicked, remove this parent li
$("#caseform-FileUploader").on('click','#caseform-RemoveFileUpload', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

Additionally, As IDs must be unique I suggest you use class for caseform-RemoveFileUpload anchor
DEMO

