如何使用jQuery複製和清除表單元素？

Question

如果我有一個表格內的下列HTML：

<div class='example'> 
    <div class='row'> 
     <input name='first_field' type='text' value='Hello' /> 
     <input name='second_field' type='text' value='World!' /> 
    </div> 
</div> 

如何去創造這個（第一），「行」的一個副本，其中剝離出去，從而根據需要在其後追加的價值，爲多個用戶輸入。爲什麼一個值可能已經存在（如在這個例子中）是爲了編輯數據的情況。我想獲得：

<div class='row'> 
     <input name='first_field' type='text' value='' /> 
     <input name='second_field' type='text' value='' /> 
    </div> 

我已經沿着線心想：

var row = $('.example').find('.row:first-child').clone(); 
row.find('[name]').each(function() { 
    $(this).val(''); 
}); 

但這不起作用，因爲它似乎並沒有刪除該值，也沒有捕捉到外HTML（包裝）。

任何人都可以建議嗎？

謝謝。

Answer 1

您在js中有語法錯誤。 .find('.row:first-child)應該是.find('.row:first-child')，但對於克隆， 的默認行爲是剝離出這些值。 從頭開始......這只是爲了克隆實際的輸入元素。

http://jsfiddle.net/Yb2Ym/

var row = $('.example').find('.row:first-child').clone(); 
row.find('[name]').each(function() { 
    $(this).val(''); 
}); 
$(".row:last").after(row)