Can not dynamically remove input element from form

Question

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?

Satpal · Accepted Answer · 2014-01-03 15:50:44Z

1

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

edited Jan 3, 2014 at 15:50

answered Jan 3, 2014 at 15:45

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-01-03 15:47:34Z

Don't use id for the remove button since id must be unique(you are adding multiple remove buttons with the same id), use a class attribute to group them.

You need to use event delegation as you are dealing with dynamic elements

//don't use id selector with element selector
var filenumber = $('#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="#" class="caseform-RemoveFileUpload">Remove</a></li>').appendTo("#caseform-FileUploader ul");
    filenumber++;
    return false;
});

//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;
});

Demo: Fiddle

Adil · Accepted Answer · 2014-01-03 15:51:26Z

You need event delegation, to bind event for dynamically added elements. The time you are binding event on element with id caseform-RemoveFileUpload does not exists but added later in the caseform-AddFile click event handler.

$(document).on('click', '#caseform-RemoveFileUpload', function () {
    if (filenumber > 0) {
        $(this).parent('li').remove();
        filenumber--;
    }
    return false;
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, reference.

arun15thmay · Accepted Answer · 2014-01-03 15:46:36Z

0

You have dynamically added elements. They have to work.

 $(document).on('click', '#caseform-RemoveFileUpload', function () {
if (filenumber > 0) {
    $(this).parent('li').remove();
    filenumber--;
}
return false;
});

http://jsfiddle.net/T8fUY/1/

answered Jan 3, 2014 at 15:46

arun15thmay

1,0621 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Can not dynamically remove input element from form

4 Answers 4

Comments

Comments

Delegated events

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Delegated events

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related