Wie klonen Sie Formularfelder ohne ihre Werte?

Question

Wie klonen folgende HTML, ohne die Feldwerte zu erhalten?

<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> 

Ich kann nur 3 mögliche Auswahlmöglichkeiten hier sehen. Allerdings kommen sie alle mit größeren Mängel:

1. .clone() die .form-field normal und die Feldwerte zurückgesetzt.
   Problem: das Zurücksetzen aller Werte einzeln ist umständlich und keine zukunftssichere Lösung. Wenn zum Beispiel mehr Felder zu .form-group hinzugefügt werden, müssen ihre Werte getrennt gelöscht werden.
2. Fügen Sie eine verborgene .form-group als Vorlage auf der Seite ein.
   Problem: Wie Sie sehen, enthalten die Eingabefelder Aufzählungsnamen wie: . Es ist praktisch, die letzte .form-group zu klonen und den Wert nur um 1 zu erhöhen. Das Klonen der Templates .form-group wird diese Flexibilität fehlen.
3. Lesen Sie die Felder als roher html und wandeln sie in JQuery Objekt
   Problem: dies eine klare Lösung zu mir zu sein scheint, aber ich konnte es nicht bekommen zu arbeiten. Der Code $.parseHTML($('.form-group').html()) gibt kein gültiges JQuery-Objekt zurück, das ich .find() und andere Methoden verwenden muss.

Was wird eine effektive und elegante Lösung für dieses Problem sein?

Answer 1

diesen Code Versuchen:

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