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

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');

这是一个 链接到我的意思： '+' & '-' 符号是代码的用途，但它们不能在单独的场合使用...我该怎么做才能使它们在同一个 html 页面上可用，无论我打算增加或减少迭代次数？

Answer 1

首先，我认为你应该尝试编写一个插件并从这里开始

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

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