The on click to remove does not work

Question

I was trying to execute a jquery code in jsfiddle. My jquery code is given below

$(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("sfdrijg");
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

My HTML code is given below.

<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>
</p>
</div>

My Page Looks like this

Page designed

The click of the "Add Another Input Box" always works whereas the "Remove" does not respond at all.

score 4 · Accepted Answer · edited May 23 '17 at 12:29

4

Try to change your code to

$(document).on('click','#remScnt', function() {

Refer This is a good answer for more details. https://stackoverflow.com/a/8752376/1640577

edited May 23 '17 at 12:29

Community

1
1

answered Jul 31 '14 at 06:05

Jithin Lukose

344
4
18

Please explain, why is this different? – Teemu Jul 31 '14 at 06:06
Thanks the solution worked but why didn't the other one work. – Manesh Jul 31 '14 at 06:07
Event binding on objects added to the dom later needs this format – mplungjan Jul 31 '14 at 06:08
@Teemu Those dom elements were added dynamically. – VenomVendor Jul 31 '14 at 06:09
3

@VenomVendor I know that, but obviously OP doesn't. Answers should be more than just a piece of code. – Teemu Jul 31 '14 at 06:12
@Teemu thanks. I will try to add more details If I answer. – Jithin Lukose Jul 31 '14 at 06:17

Rakesh Shetty · Answer 2 · 2014-07-31T06:33:37.590

Working Demo : JsFiddle

I. Your code will create multiple ids with the same name remScnt which is not right. You have to add class of that element say class="remScnt"

An id must be unique in a page. Use a class if you want to describe a group of elements.

Reason :- Your code will not be valited by W3C, what means that you can have headaches with your website's compability accross browsers. It can works fine in one browser and in other not.

So try to add unique ids for the element.

II Also you have to change your code like below :

$(document).on('click','.remScnt', function() { /* Code goes here */ });

Reason : Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). Your dynamically added element doesn't exist when you call $.on() on it, so the event isn't bound.

Try this code :

$(document).on('click','.remScnt', function() { 
    alert("sfdrijg");
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        // you don't need to add return false            
});

You need the format Jithin used – mplungjan Jul 31 '14 at 06:12 — mplungjan, Jul 31 '14 at 06:12

score 0 · Answer 3 · answered Jul 31 '14 at 06:08

0

You haven't provided the html code for your Remove button.

Anyhow, if the your Remove button is the direct child of the

element you're trying to remove, you should use .parent(). It should work just fine. And you don't need to return anything.

so:

$('#remScnt').on('click', function() { 
    alert("sfdrijg");
        if( i > 2 ) {
                $(this).parent().remove();
                i--;
        }
});

answered Jul 31 '14 at 06:08

user3885269

51
1
1

1

he has provided the HTML of remove button please read the question properly – Rakesh Shetty Jul 31 '14 at 06:09
Also, be sure to read the answer above mine. Multiple elements with same IDs are not valid html. Missed it, nice job. – user3885269 Jul 31 '14 at 06:10
you see an html element with the ID of #remScnt? – user3885269 Jul 31 '14 at 06:11
yes see jquery code he is adding remove button dynamically – Rakesh Shetty Jul 31 '14 at 06:12
oh, in the js.. ok, my mistake, pulling an all-nighter here. – user3885269 Jul 31 '14 at 06:12

The on click to remove does not work

3 Answers3