使用jQuery删除表单字段

debugcn 发表于 Dev

本卡特78

我正在尝试使用jQuery 1.9添加和删除表单字段。它添加的字段很好，但是在尝试删除它时却什么也没有发生。

这是HTML ...

<div class="control-group spacing-top">
<label for="answer[]" class="control-label required">Answers</label>
<div id="answers" class="controls">
    <div class="answer-holder input-append">
        <input class="input-xxlarge" placeholder="Answer" name="answer[]" type="text" value="" id="answer[]">   <span class="add-on"><i class="icon-remove"></i></span>

    </div>
</div>
<button class="button button-secondary answer-add"><i class="icon-plus"></i> Add Answer</button>

这是jQuery ...

$(function () {
    var i = $('.answer-holder').length;
    $('.answer-add').on('click', function () {
        $('<div class="input-append"><input class="input-xxlarge" name="answer[]" type="text" value="" id="answer_' + i + '"><button class="answer-delete">Remove</button></div>').appendTo($('#answers'));
        i++;
        return false;
    });

    $('.answer-delete').on('click', function () {
        $(this).parent('.answer-holder').remove();
        return false;
    });
});

有谁可以帮助我吗？

谢谢

罗汉·库玛（Rohan Kumar）

两件事要做

第一的

class answer-holder何时添加到divcreating

第二

$(document).on('click','.answer-delete', function () {代替使用$('.answer-delete').on('click', function () {

完整的代码

$(function () {
    var i = $('.answer-holder').length;
    $('.answer-add').on('click', function () {
        $('<div class="input-append answer-holder"><input class="input-xxlarge" name="answer[]" type="text" value="" id="answer_' + i + '"><button class="answer-delete">Remove</button></div>').appendTo($('#answers'));
        i++;
        return false;
    });

    $(document).on('click','.answer-delete', function () {
        $(this).parent('.answer-holder').remove();
        return false;
    });
});

工作小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。