Dynamically adding and removing checkbox and inputfield

Question

I want to make it possible to add and/or remove inputfields and a checkbox (for a competition-page)

Even though, when I click on the add button, 2 inputfields gets added and when i click the remove button, only on of those disappear. What is the issue?

var InputsWrapper   = $("#answerDiv");
var AddButton       = $(".adaddnext"); 

var x = InputsWrapper.length; 
var FieldCount=1; 

$(AddButton).click(function (e)  {
FieldCount++; 
$(InputsWrapper).append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;

return false;
});

$("body").on("click",".adaddnextremove", function(e){ 
    if( x > 1 ) {
        $(this).parent('div').remove(); 
        x--; 
    }
return false;
})

And the HTML:

<div id="answerDiv">
    <div class="adinputfield83">
        <div class="checkaccept cacc1">
            <label class="option">
                <input type="radio" id="contestAnswerChk_1" name="correct" class="validate[required]">
                <span class="checkbox"></span>
            </label>
        </div>
        <input type="text" id="contestAnswer_1" placeholder="Write possible answer" class="validate[required]">
            <span class="font-entypo icon-plus adaddnext" aria-hidden="true"></span>
        </input>                    
    </div>              
</div>

Can someone help me out? Thanks...

$(AddButton).click(function (e) { replace as AddButton.click(function (e) . Same for everything — Balachandran
– Balachandran, Commented Jun 17, 2014 at 13:20
Seems to work fine... What am I missing?: jsfiddle.net/TrueBlueAussie/R3TLB — iCollect.it Ltd
– iCollect.it Ltd, Commented Jun 17, 2014 at 13:26
@TrueBlueAussie Yes, In my case I added the add-button with each line! How can I add a button after each input field, which adds only 1 additional inputfield? — SHT
– SHT, Commented Jun 17, 2014 at 13:27
Answer below... You needed another delegated event for the adds. I also converted your string-HTML to a simple template to make it easier to maintain (I think you will agree). :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Jun 17, 2014 at 13:40

iCollect.it Ltd · Accepted Answer · 2014-06-17 13:55:17Z

JSFiddle: http://jsfiddle.net/TrueBlueAussie/R3TLB/2/

You needed a delegated event for your add buttons as well as the delete buttons.

var InputsWrapper = $("#answerDiv");

var x = InputsWrapper.length;
var FieldCount = 1;

$(document).on('click', '.adaddnext', function (e) {
    FieldCount++;
    var template = $('#template').html();
    template = template.replace(/{FieldCount}/g, FieldCount);
    $(InputsWrapper).append(template);
    x++;

    return false;
});

$(document).on("click", ".adaddnextremove", function (e) {
    if (x > 1) {
        $(this).parent('div').remove();
        x--;
    }
    return false;
})

HTML (using template HTML in dummy script block):

<script id="template" type="text/template">
    <div class="adinputfield83">
        <div class="checkaccept cacc1">
            <label class="option">
                <input type="radio" id="contestAnswersChk_{FieldCount}" name="correct" class="validate[required]" /><span class="checkbox"></span>
            </label>
        </div>
        <input type="text" id="contestAnswer_{FieldCount}" placeholder="Write possible answer" class="validate[required]" /><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true">Del</span>
        <input type="button" class="adaddnext" value="Add" />
    </div>
</script>
<div id="answerDiv">
    <div class="adinputfield83">
        <div class="checkaccept cacc1">
            <label class="option">
                <input type="radio" id="contestAnswerChk_1" name="correct" class="validate[required]" /> <span class="checkbox"></span>

            </label>
        </div>
        <input type="text" id="contestAnswer_1" placeholder="Write possible answer" class="validate[required]"> <span class="font-entypo icon-plus adaddnext" aria-hidden="true"></span>

        </input>
    </div>
    <input type="button" class="adaddnext" value="Add" />
</div>

Notes:

Do not use $('body') to listen for delegated events. It can have odd side-effects with certain events (including click). Use a fallback of $(document) instead, if you do not have a closer non-changing ancestor to your dynamic elements. Really you should be using $('#answerDiv').on('click'... as that is the closest static ancestor (more efficient and more specific).

D051P0 · Accepted Answer · 2014-06-17 13:29:12Z

You have already defined you variables as selector $(...) so you should use only var names: AddButton.click()

The code looks then:

var InputsWrapper   = $("#answerDiv");
var AddButton       = $(".adaddnext"); 

var x = InputsWrapper.length; 
var FieldCount=1; 

AddButton.click(function (e)  {
FieldCount++; 
InputsWrapper.append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;

return false;
});

$("body").on("click",".adaddnextremove", function(e){ 
    if( x > 1 ) {
        $(this).parent('div').remove(); 
        x--; 
    }
return false;
})

or you can also define your variables as string, for example:

var AddButton = ".adaddnext"

then you can use it, as you did in your code:

$(AddButton).click(...)

Then is should look like:

var InputsWrapper   = "#answerDiv";
var AddButton       = ".adaddnext";

var x = InputsWrapper.length; 
var FieldCount=1; 

AddButton.click(function (e)  {
FieldCount++; 
InputsWrapper.append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;

return false;
});

$("body").on("click",".adaddnextremove", function(e){ 
    if( x > 1 ) {
        $(this).parent('div').remove(); 
        x--; 
    }
return false;
})

If you put all this in a fiddle, you will realize it does not work because the question's HTML was incomplete (no add buttons per item). Those missing add buttons also need a delegated on. Read all the comments too.

Collectives™ on Stack Overflow

Dynamically adding and removing checkbox and inputfield

2 Answers 2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/R3TLB/2/

HTML (using template HTML in dummy script block):

Notes:

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/R3TLB/2/

HTML (using template HTML in dummy script block):

Notes:

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related