如何克隆表單字段沒有它們的值？

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(''); 
});