Javascript 动态删除div时出错

我试图每行动态添加3个字段（2个文本字段和1个删除按钮）。“添加”按钮工作正常。问题在于remove函数。当我添加两个或更多字段并尝试删除第一个字段时，两个添加的字段/行都将被删除

这是我的html代码：

<div class="col-lg-12">

    <div class="field_wrapper form-group col-sm-12">
        <div class="form-group col-sm-4">
            <input type="text" name="id[]" value="" class="form-control"/>
        </div>
        <div class="form-group col-sm-4">
            <input type="text" name="name[]" value="" class="form-control"/>
        </div>
        <div class="form-group col-sm-4">
            <a href="javascript:void(0);" class="add_button btn btn-primary" title="Add field">Adicionar Valor</a>
        </div>
    </div>

</div>

这是javascript：

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper:last'); //Input field wrapper
    var wrapper_delete = $('.field_wrapper');

    //var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Remove field">Remover</a></div>'; //New input field html 
    var fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Add field"><i class="fa fa-trash-o"></i></a></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        wrapper = $('.field_wrapper:last'); //Input field wrapper
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            var count = $('.field_wrapper').length;
            fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id_'+ count +'" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name_' + count +'" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Add field"><i class="fa fa-trash-o"></i></a></div></div>'; //New input field html
            $(wrapper).append(fieldHTML); // Add field html

        }
    });

    $(wrapper_delete).on('click', '.remove_button', function(e){ //Once remove button is clicked
        wrapper_delete = $('.field_wrapper');
        e.preventDefault();
        $(this).closest('.field_wrapper').remove();
        x--; //Decrement field counter
    });
});
</script>

$（文档）.ready（函数（）{
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper:last'）；//输入字段wrapper
var wrapper_delete=$（'.field_wrapper'）；
//var fieldHTML=''；//新输入字段html
var fieldHTML=''；//新输入字段html
var x=1；//初始字段计数器为1
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
wrapper=$（'.field_wrapper:last'）；//输入字段wrapper
如果（x

---

如何修复此问题？

您正在将新的

field\u wrapper

元素附加到

field\u wrapper:last

。您应该将它放在后面，因此应该使用

.after（）

而不是

.append（）

并在

文档

（或最近的静态祖先）上代表单击事件，因为

.field\u wrapper

元素也是动态添加的，您无法将事件附加到它

$(document).on('click', '.remove_button', function(e){ 

---

看看你想做什么。我建议使用。实际上，您不需要更改

输入

名称（除非原因不是避免名称重复），因为它们被设置为数组。
这样，您的所有代码都可以简单到如下所示：

$('.add_button').click(function(){
  $('.field_wrapper').length >= maxField ||
    wrapper.clone(true).find('a.btn').toggle().end().insertAfter('.field_wrapper:last');
});

$('.remove_button').hide().click(function(){
  $(this).closest('.field_wrapper').remove();
});

var maxField = 10, wrapper = $('.field_wrapper').clone(true);

$('.add_button').click(function(){
  $('.field_wrapper').length >= maxField ||
    wrapper.clone(true).find('a.btn').toggle().end().insertAfter('.field_wrapper:last');
});

$('.remove_button').hide().click(function(){
  $(this).closest('.field_wrapper').remove();
});

var maxField = 10, wrapper = $('.field_wrapper').clone(true);