如何克隆表单字段没有它们的值？

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种可能的选择。然而，所有这些都与重大缺陷：

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

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

Answer 1

试试这个代码：关于使用解决方案1号和复位与JavaScript'复位（）`函数什么

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