使用jQuery

Question

我正在尝试使用两个输入部分，用户可以在其中添加或删除文本框，这就是我的代码的外观。

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = ('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
			//$(wrapper).slideDown(800);
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

 </br>
 
  <div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

“删除”链接有效，但是当我尝试添加文本框时，会在两个部分中添加文本框。有没有办法只将文本框添加到按下“添加”链接的div？谢谢。

Answer 1

$(this.parentElement).append(fieldHTML); // Add field html

编辑答案，以便最多可以有10个：

`$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = ('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
$(addButton).click(function(){ //Once add button is clicked
    var theWrapper = $(this).closest(wrapper);
    var numOfChildren = theWrapper.children().length;
    if( numOfChildren < maxField){ //Check maximum number of input fields
        theWrapper.append(fieldHTML);
    }
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});

}）;`

Answer 2

您可以使用jQuery最接近的函数 - 请参阅此JSFiddle：https://jsfiddle.net/8sdpLy3L/

$(this).closest(wrapper).append(fieldHTML);

Answer 3

这是因为你的var wrapper = ('.field_wrapper'); //Input field wrapper引用了.field_wrapper类。因此，当您使用$(wrapper).append(fieldHTML); // Add field html进行追加时，它会将其添加到具有该类的两个元素中。

我会在你想要追加字段的包装器中添加一个id，并为添加按钮分开点击处理程序，或者为添加按钮添加数据属性以指向正确的id。