添加和删​​除文本框元素

Question

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

                $('#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');

这是link对我的意思的概念： '+'＆amp; ' - '符号是代码的用途，但它们不能在不同的场合使用......我能做些什么才能使它们在同一个html页面上可用，而不管我打算增加或减少的迭代次数？

Answer 1

首先，我认为您应该尝试编写插件并以here为例。 然后，您不需要为添加的元素编号。如果删除最后一个，只需使用：

$('#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.

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