Question

如何在不保留字段值的情况下克隆以下html？

<form method=POST action="/url">
    <div class="form-group" data-answer>
        <div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>

        <div class="pull-right">
            <a href="#" data-remove><span class="glyphicon glyphicon-remove"></span></a>
        </div>
        <input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
    </div>

    <div class="form-group" data-answer>
        <div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>

        <div class="pull-right">
            <a href="#" data-remove><span class="glyphicon glyphicon-remove"></span></a>
        </div>
        <input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
    </div>

    . . .

    <button type="submit">Submit</button>
</form>

我在这里只能看到3种可能的选择。但是，所有这些都存在重大缺陷：

.clone() .form-field正常并重置字段值。
问题：逐个重置所有值很麻烦，并不是一个面向未来的解决方案。例如，如果在.form-group中添加了更多字段，则需要单独清除它们的值。
在页面上添加隐藏的.form-group作为模板。
问题：如您所见，输入字段包含枚举名称，如：answer[1][body]。克隆最后一个.form-group并将值增加1很方便。克隆模板.form-group将缺乏这种灵活性。
将字段作为原始html读取并将其转换为JQuery对象
问题：这对我来说似乎是一个明确的解决方案，但是我无法让它发挥作用。代码$.parseHTML($('.form-group').html())不返回有效的JQuery对象，我需要使用.find()和其他方法。

这个问题的有效优雅解决方案是什么？

Answer 1

试试这段代码：

 $("button").click(function(){
    var t = $("form").clone().appendTo("#clonedForm");
    $(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});

如何在没有值的情况下克隆表单字段？

1 个答案: