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

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： '+' 和 '-' 符号是代码的用途，但它们不能在不同的场合使用......无论我打算增加多少次迭代，我能做些什么来让它们在同一个 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.

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