Question

这就是我现在所拥有的。我试图使用jQuery add（）和append（）方法动态地向表单添加字段。但是我想在单击删除按钮时删除特定的添加字段。

<div class="col-md-12">
    <h3>Added Description Fields</h3>

    <div class="col-md-12" id="descFields">

    </div>
</div>

JS

$(document).ready(function() {

    console.log(descFields);



    $('#addDesc').click(function(e) {

        var descFields = $('#descFields');

        var descLabel = $('#descLabel').val();

        var large = '<div class="form-group" id="descField"><div class="input-group"><input type="text" class="form-control" placeholder="Enter Value For ' + descLabel + '" /><span class="input-group-btn"><button class="btn btn-danger" id="removeDesc" type="button">Remove</button></span></div>';

        descFields.add(large).appendTo(descFields);

        e.preventDefault();

    });

    $('#removeDesc').click(function(e) {

        $(this).remove();


    });
});

当用户单击#removeDesc按钮时，应删除添加的字段。我无法弄清楚如何实现这一目标。

Answer 1

添加点击事件以删除按钮，如下所示：

    $(document).on("click","#removeDesc",function(e) {

        $(this).remove();
     });

Answer 2

有很多方法可以做到这一点，但问题的解决方法更简单：

$(document).ready(function() {

    console.log(descFields);



    $('#addDesc').click(function(e) {

        var descFields = $('#descFields');

        var descLabel = $('#descLabel').val();

        var large = '<div class="form-group" id="descField"><div class="input-group"><input type="text" class="form-control" placeholder="Enter Value For ' + descLabel + '" /><span class="input-group-btn"><button class="btn btn-danger" id="removeDesc" type="button">Remove</button></span></div>';

        descFields.add(large).appendTo(descFields);

        e.preventDefault();

    });

    $('#descFields').on('click', '#removeDesc', function(e) {
        $(this).parents('.form-group').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="descLabel"/>
<button id="addDesc">Add Desc</button>

<div class="col-md-12">
    <h3>Added Description Fields</h3>

    <div class="col-md-12" id="descFields">

    </div>
</div>

您的问题出在删除行的回调中。当文档加载完毕后，您尝试将单击事件附加到DOM中仍然不存在的对象#removeDesc，因为当用户单击#addDesc时它是动态创建的。这就是你应该使用的原因：

$('#descFields').on('click', '#removeDesc', function(e) {
    $(this).parents('.form-group').remove();
});

正如@vijayP建议的那样，您可以使用on（）将事件处理程序附加到容器中，在该容器中您将添加DOM中仍然不存在的对象。然后传入查询选择器作为第二个参数来过滤执行时间，其子项将触发事件并执行回调。

我的另一个诀窍是我正在使用.parents('.form-group')来选择包含该组的div并删除所有已添加的字段，而不是只删除该按钮。

快乐的编码！

如何在bootstrap中删除输入组？

2 个答案: