jquery add remove input fields

Question

Hello i have the following code jsfiddle. The add function works ok but the remove function doesn't work at all. Can you help me please solve the problem?

HTLM Part

Add Another Input Box

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

Jquery Part:

$(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" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><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() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

Denys Séguret · Accepted Answer · 2013-05-07 06:31:19Z

5

A problem with $('#remScnt').on('click', function() { is that you're trying to bind the event handler to the elements in the $('#remScnt') collection, which is empty at that time.

Another problem is that only one element can have a given id, so you must use a class if you want to be able to add more than one line.

So I recommend this construct :

    $('<p><label [...] class="remScnt"   [...]  ').appendTo(scntDiv);

    ...

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

Demonstration

edited May 7, 2013 at 6:31

answered May 7, 2013 at 6:25

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

5 Comments

David Hedlund Over a year ago

+1 although an explanation could be in place, and a context closer than document could easily be picked given the code in the question.

Denys Séguret Over a year ago

@DavidHedlund I fixed the context. I'll write a more detailled explanation.

basarat Over a year ago

@dystroy your code doesn't work. You need to bind to body. Your demonstration has correct code :)

Denys Séguret Over a year ago

@BasaratAli I just tested it with this selector, it works for me.

basarat Over a year ago

works for me as well. There was a disconnect between the demonstration and code sample. I see you've fixed it now. +1

basarat · Accepted Answer · 2013-05-07 06:31:13Z

1

You are binding to an element before it is created. You need to do live monitoring:

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

Working fiddle: http://jsfiddle.net/basarat/gnQzk/

That said, I recommend using a class instead of id.

ie. something like :

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

edited May 7, 2013 at 6:31

answered May 7, 2013 at 6:25

basarat

278k60 gold badges475 silver badges528 bronze badges

3 Comments

Denys Séguret Over a year ago

It's illegal to give the same id to more than one element.

basarat Over a year ago

Yeah I was mentioning that :)

Bogdan Over a year ago

it's just some fast code ... i need to do .. for our secretary to work make some internal invoices that we use. and i knew it was something like that ( read the manual ) but i wasn't sure about the implementation of delegated events.

Collectives™ on Stack Overflow

jquery add remove input fields

Add Another Input Box

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Add Another Input Box

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related