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 .