添加后从表单中删除输入时出现问题

Question

所以我的表单成功地在单击按钮时添加了新输入。但是现在我希望能够在单击新按钮时删除最后一个添加，然后还有一个重置按钮。

这是我的代码，我意识到现在只是删除提交按钮，这显然我不想要。

这是我的javascript片段:(注意我已经包含了appendTo（）来演示我成功追加的div）

$(function() { 
var i = $('input').size('#temp') + 1; 
$('a#add').click(function() { 
    $('<input type="text" value="user' + i + '" />').appendTo('#temp'); 
    i++; 
});
$('a#remove').click(function() { 
if(i > 3) { 
    $('input:last').remove(); 
    i--; 
}
});

非常感谢，

Answer 1

您的脚本将删除页面中的最后一个输入，而不是具有id temp的div中的最后一个输入。也许您正在从页面中删除其他输入。

试试这个：

$('a#remove').click(function() { 
    if(i > 3) { 
        $('#temp input:last').remove(); 
        i--; 
    }
});

修改

您只关闭$('a#remove').click()事件处理程序，而不是匿名函数。这可能是复制/粘贴错误，但也可能是代码中的问题。

编辑2：

要删除原始文件以外的所有内容，我建议保留对所有添加的输入的引用，因为这样可以减少每次删除时遍历DOM的需要。所以做这样的事情（这段代码既未经过测试也未经过验证）：

$(function() { 
    var addedInputs = [];
    $('a#add').click(function() { 
        var newInput = $('<input type="text" value="user' + i + '" ">').appendTo('#temp'); 
        addedInputs.push(newInput);
    });

    $('a#remove').click(function() { 
        var inputToRemove = addedInputs.pop();
        inputToRemove.remove();
    });

    $('a#clear').click(function() { 
        var i,
            inputToRemove;
        for(i = addedInputs.length - 1;i >= 0; i -=1) {
            inputToRemove = addedInputs[i];
            inputToRemove.remove();
        }
        addedInputs = [];
    });
});

Answer 2

你试过了吗？

$("a#remove").click(function() { 
    if(i > 3) { 
        $("input[type='text']").last().remove(); 
        i--; 
    }
});

这将选择type =“text”的输入，取最后一个并删除它。