Javascript 使用jQuery添加/删除多个输入类型文本

我尝试在两个输入部分中添加或删除一个文本框，这就是我的代码的外观

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



这是因为您的
var包装器=（'.field_包装器'）//输入字段包装器
正在引用.field\u包装器类。因此，当您使用
$（包装器）.append（fieldHTML）；//Add field html
将其添加到具有该类的两个元素中

我会向您想要附加字段的包装器添加一个id，并为添加按钮添加单独的单击处理程序，或者向添加按钮添加一个数据属性以指向正确的id。
这是因为您的
var包装器=（'.field_包装器'）//输入字段包装器
正在引用.field\u包装器类。因此，当您使用
$（包装器）.append（fieldHTML）；//Add field html
将其添加到具有该类的两个元素中

我会向要将字段附加到的包装中添加一个id，并为添加按钮添加单独的单击处理程序，或者向添加按钮添加一个数据属性，以指向正确的id。
$（this.parentElement）。append（fieldHTML）；//添加字段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
});

`$（document）.ready（function（）{
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=（'.field_wrapper'）；//输入字段wrapper
var fieldHTML=''；//新输入字段html
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
var theWrapper=$（this）.closest（wrapper）；
var numOfChildren=theWrapper.children（）.length；
如果（numfochildren

}))`
 
$（this.parentElement）.append（fieldHTML）；//添加字段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
});

`$（document）.ready（function（）{
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=（'.field_wrapper'）；//输入字段wrapper
var fieldHTML=''；//新输入字段html
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
var theWrapper=$（this）.closest（wrapper）；
var numOfChildren=theWrapper.children（）.length；
如果（numfochildren

}))`
 您可以使用jQuery最接近的函数-参见以下JSFIDLE：

您可以使用jQuery最接近的函数-请参见以下JSFIDLE：

您可以使用jQuery代码将这两个部分作为目标。添加一个唯一的类，并对每个部分使用该类来分隔它们。使用jQuery代码将两个部分都作为目标。添加一个唯一的类，并对每个部分使用该类来分隔它们。与上面类似，您可以找到作为单击按钮父级的包装器。此链接具有使用类似程序的半相关代码。因为你需要你的函数来获取一个输入参数（比如e），这将有一个e.target。然后你可以附加到父对象或e.target或类似对象。我也想使用ID，问题是这些部分是从循环生成的，大约有20个。我可以为所有这些分配一个不同的ID，但这将是一个很长的代码，有时循环会生成20多条记录，这将是一个问题，这就是为什么我使用类。啊，很公平。在这种情况下，我将参考@combatc2的答案。这里有一个更好的事件目标父级示例，与上面类似，您可以找到作为单击按钮父级的包装器。此链接具有使用类似程序的半相关代码。因为你需要你的函数来获取一个输入参数（比如e），这将有一个e.target。然后你可以附加到父对象或e.target或类似对象。我也想使用ID，问题是这些部分是从循环生成的，大约有20个。我可以为所有这些分配一个不同的ID，但这将是一个很长的代码，有时循环会生成20多条记录，这将是一个问题，这就是为什么我使用类。啊，很公平。在这种情况下，我会参考@combatc2的答案。这里有一个事件目标的父Np的更好的例子-很高兴我能提供帮助！抱歉打扰了，但我发现了另一个问题，“添加”链接一直运行到计数器点击10，这意味着如果我在一个部分点击5次，那么我只能在另一个部分点击5次，或者如果我在一个部分点击3次，那么我只能在另一个部分点击7次，依此类推。。有没有办法为每个s设置一个唯一的计数器