Jquery 添加和删除文本框元素

我设法在网上找到允许我删除和添加文本框的代码。但是，我正在尝试修改代码，以适应在同一页面上以单独迭代方式添加和删除文本框的情况，这些代码不允许我这样做。以下是我添加和删除文本框的代码：

                $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                //prepend table code
                $('#input' + num).append('<tr><td colspan="2"><label>');
                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);
                //prepend table code
                $('#input' + newNum).append('</label></td></tr>');
                // enable the "remove" button
                $('#btnDel').attr('disabled','');
                // business rule: you can only add XXX times
                if (newNum == 5)
                    $('#btnAdd').attr('disabled','disabled');

                return false
                    });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                $('#input' + num).remove();     // remove the last element
                // enable the "add" button
                $('#btnAdd').attr('disabled','');
                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');

                return false    
                });



            $('#btnDel').attr('disabled','disabled');

$（'#btnAdd'）。单击（函数（）{
var num=$（'.clonedInput'）.length；//当前有多少个“可复制”输入字段
var newNum=newnumber（num+1）；//正在添加的新输入字段的数字ID
//通过clone（）创建新元素，并使用newNum值操纵其ID
var newElem=$（'#input'+num）.clone（）.attr（'id'，'input'+newNum）；
//操纵新元素内输入的名称/id值
newElem.children（':first'）.attr（'id'，'name'+newNum）.attr（'name'，'name'+newNum）；
//前置表代码
$（'#输入'+num）.append（''）；
//在最后一个“可复制”输入字段后插入新元素
$（'#input'+num）.after（newElem）；
//前置表代码
$（'#输入'+newNum）.append（''）；
//启用“删除”按钮
$（'btnDel'）.attr（'disabled'，''）；
//业务规则：只能添加XXX次
如果（newNum==5）
$（'btnAdd'）.attr（'disabled'，'disabled'）；
返回错误
});
$（'#btnDel'）。单击（函数（）{
var num=$（'.clonedInput'）.length；//当前有多少个“可复制”输入字段
$（'#输入'+num）.remove（）；//删除最后一个元素
//启用“添加”按钮
$（'btnAdd'）.attr（'disabled'，''）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）
$（'btnDel'）.attr（'disabled'，'disabled'）；
返回错误
});
$（'btnDel'）.attr（'disabled'，'disabled'）；

以下是对我的意思的一个解释：

---

“+”&“-”符号是代码的用途，但它们不能在单独的场合使用……我该怎么做才能使它们在同一个html页面上可用，而不管我打算增加或减少的迭代次数是多少？

首先，我想你应该试着编写一个插件，然后开始。 然后，不需要对添加的元素进行编号。如果删除最后一个，您只需使用：

$('#yourItemContainer').last().remove();

然后你说+和-按钮不能在单独的场合使用。我假设整个元素都被克隆到代码中，我看不到+和-元素是如何创建的，但是如果它们有一个ID，它们可能不再是唯一的，因此它们可能不会执行您期望它们执行的操作。因此，请确保ID是唯一的，甚至更好，在这种情况下不要使用ID，而是给它们一个不必唯一的类名，并且在删除时，例如：

yourRemoveElement.parent().parent().parent().parent().remove(); // assuming the remove button is in a td which is in a tr which is in a tbody which is in a table.

---

希望这能帮助你进一步。如果没有，请在此处发送更多详细信息。

假设我有3次迭代，每次迭代都必须创建任务。迭代中的每个+&-按钮都必须能够在单个迭代中添加和删除任务。如果我有以下用于任务输入的html代码，如何确保上面列出的代码不会与其他迭代的“+&”按钮冲突：