使用jQuery添加/刪除輸入框 - 添加輸入框復制第一個輸入框的值

Question

我在這里有一個半工作的JSFiddle： http ： //jsfiddle.net/BHdhw/311/我在這個網站的幫助下整理了這段代碼：

HTML

<div class='Option'><input type='text' name='txtTest1'/><input type='text' name='txtTest2'/><input type='text' name='txtTest3'/> <span class='Delete'><input id="Delete" class="button_text" type="submit" name="submit" value="Delete" /></span></div>

<br/><br/>
<span class='Add'><input id="Add" class="button_text" type="submit" name="submit" value="Add" /></span>

jQuery的

$(function(){

    $('.Delete').live('click',function(e){
    $(this).parent().remove();
    });
    $('.Add').live('click',function(e){
        $('.Option:last').after($('.Option:first').clone());
    });

});

如果我在第一個輸入框中有文本，並且我使用“添加”按鈕添加了另一行輸入框，則會添加一行新的輸入框，但這些新框的內容會模仿第一組框的內容。 有沒有辦法生成一組空白輸入框，即使第一組框中有值？ 我已經在jQuery API中搜索了clone（）和其他一些方法，但是我還沒有能夠找到適合我的任何東西。

是否有辦法在創建后清除最后一組輸入框的值？ 或者只是生成一組沒有值的空白框的方法？

Answer 1

$(function(){
    $('.Delete').live('click',function(e){
    $(this).parent().remove();
    });
    $('.Add').live('click',function(e){
        $('.Option:last').after($('.Option:first').clone()
                               .find("input:text").val("").end());
    });
});