Блог

Я хочу сделать возможным добавление и / или удаление входных полей и флажка (для страницы соревнований)

Несмотря на то, что, когда я нажимаю на кнопку добавления, добавляются 2 поля ввода, а когда я нажимаю кнопку удаления, исчезает только одно из них. В чем проблема?

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

И 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>
  

Может кто-нибудь мне помочь? Спасибо…

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

Вам нужно было делегированное событие для ваших add кнопок, а также для кнопок удаления.

 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 (с использованием шаблона HTML в фиктивном блоке скрипта):

 <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>
  

Примечания:

Не используйте $('body') для прослушивания делегированных событий. Это может иметь странные побочные эффекты при определенных событиях (в том числе click ). $(document) Вместо этого используйте запасной вариант, если у вас нет более близкого неизменяемого предка для ваших динамических элементов. На самом деле вы должны использовать $('#answerDiv').on('click'... , поскольку это ближайший статический предок (более эффективный и более конкретный).

Вы уже определили свои переменные в качестве селектора $(...) , поэтому вам следует использовать только имена переменных: AddButton.click()

Затем код выглядит:

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

или вы также можете определить свои переменные как string, например:

 var AddButton = ".adaddnext"
  

затем вы можете использовать его, как вы делали в своем коде:

 $(AddButton).click(...)
  

Тогда это должно выглядеть так:

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