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

时间:2014-02-13 16:41:37

标签: javascript jquery html css jsp

我在这里有一个半工作的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()和其他一些方法,但是我还没有能够找到适合我的任何东西。

是否有办法在创建后清除最后一组输入框的值?或者只是生成一组没有值的空白框?

1 个答案:

答案 0 :(得分:2)

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