使用jQuery添加的输入框添加/删除输入框，复制第一个输入框的值

Question

我在这里有一个半工作的JSFiddle：http://jsfiddle.net/BHdhw/311/，在这个网站的帮助下，用下面的代码：

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

});

如果我在第一个输入框中有文本，并且使用add按钮添加了另一行输入框，则会添加新的一行输入框，但是这些新框的内容与第一组框的内容相似。是否有一种方法可以生成一组空白输入框，即使第一组输入框中有值？我在jQuery API中搜索了克隆()和一些其他方法，但是我没有找到对我有用的任何方法。

在最后一组输入框创建之后，是否应该有一种方法来清除它们的值？还是一种只生成一组没有值的空白框的方法？

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