Can't remove an added input field

Question

I have a JavaScript code which I've adapted from an old cold that used .live(), changing it to .on(), as I'm using JQuery 1.9.1:

Adding new input fields works correctly. The problem is that it isn't removing the added fields when clicking on Remove. It isn't even running the event click event, and I haven't been able to figure out why.

HTML code:

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    <a href="#" id="remScnt">Remove</a>
</p>
</div>

JS code:

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;
    
    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });
    
    $('#remScnt').on('click', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

possible duplicate of [jQuery - convert .live() to .on()](http://stackoverflow.com/questions/10636932/jquery-convert-live-to-on) — Matt, Apr 23 '13 at 18:33
You can't just replace `live` with `on` and expect it to work. The signature has changed as well, and it is well documented (e.g. in the official docs; http://api.jquery.com/live). — Matt, Apr 23 '13 at 18:34
You seem to be adding multiple elements with the same id as well. This could also cause some trouble with trying to remove the specific element. — Schleis, Apr 23 '13 at 18:35

score 1 · Answer 1 · answered Apr 23 '13 at 18:33

If it is trying to run the remove function for dynamically generated content, use the following handler:

$(document).on('click', '#addScnt', function() {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
});

$(document).on('click', '#remScnt', function() { 
    alert('remove');
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});

score 1 · Accepted Answer · answered Apr 23 '13 at 18:36

Event delegation.

And avoid duplicate IDs while you're at it.

I've changed them to classes instead.

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    <a href="#" class="remScnt">Remove</a>
</p>
</div>

JavaScript

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

Adil Shaikh · Answer 3 · 2013-04-23T18:43:00.937

0

try event delegation with .on() for dynamically generated elements

$(document).on('click','#remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
});

edited Apr 23 '13 at 18:43

answered Apr 23 '13 at 18:33

Adil Shaikh

44,509
17
89
111

score 0 · Answer 4 · answered Apr 23 '13 at 18:56

0

The problem is selector by id there should be only 1 element with 1 id

answered Apr 23 '13 at 18:56

rahul maindargi

5,359
2
16
23

Can't remove an added input field

4 Answers4