jQuery，动态表单生成 - 清空克隆输入字段？

Question

我正在创建一个包含某些输入字段的表单：

<label>First Name<input type="text" id="firstname1" name="firstname1"></label>
<label>Last Name<input type="text" id="lastname1" name="lastname1"></label>

还有更多内容，但你得到了要点。我已将所有输入包装到容器div中，并使用jQuery将其克隆到空div中。 （因此，有一个名为“复制”的按钮，供用户单击以创建所有相同输入字段的新框。）

$('#replicate').click(function(){
$('.container').clone().appendTo($('.emptyContainer'));

然后我需要每个新容器在每次创建一个新容器时将它的类增加1：

var container = $(".emptyContainer div").length;
var containerNumber = container + 1;
var containerClass = 'container' + containerNumber;
$(".emptyContainer .container").attr("class", containerClass);

这一切看起来都像我想要的那样 - 我现在面临的问题是，如果第一个输入字段中有任何值，复制按钮将创建一个新容器，其中包含原始字段中的信息。我怎么能克服这个？

Answer 1

克隆容器后，需要清空输入字段，然后追加到目标容器。

$('#replicate').click(function(){
    var clonedElm = $('.container').clone();
    clonedElm.find('input').val('');
    cloneElm.appendTo($('.emptyContainer'));
});

修改

你说过，每次创建一个新容器时，你需要每个新容器将它的类增加1。因此，在这种情况下，您需要删除旧类并将新类分配给克隆容器。

所以这将是解决方案：

$('#replicate').click(function(){
    var clonedElm = $('.container').clone();
    clonedElm.find('input').val('');
    var container = $(".emptyContainer div").length;
    var containerNumber = container + 1;
    var containerClass = 'container' + containerNumber;
    clonedElm.removeClass('container').addClass(containerClass);
    clonedElm.appendTo($('.emptyContainer'));
});

检查demo fiddle。