使用jquery添加和删除输入字段

时间:2014-09-26 11:58:05

标签: javascript jquery input

使用jQuery添加输入字段时遇到问题。

我将限制设置为5个输入字段。但如果我尝试删除输入字段,我的限制不起作用。 当我使用x--时,我的var x不是适当的减量,例如,如果我有5个输入字段,当我点击删除一个输入时,var x是-4而不是-1。

有人可以帮我解决这个问题。我的代码是:

$('document').ready(function() {
    var max = 5;
    var x = 0;
    $('#add').click(function(e) {  
        if(x < max) {
            $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
            x++;
        }
        $('.remove_field').click( function(e) {   
            e.preventDefault();
            $(this).parent('div').remove();
            x--;   
        });
    });
});

2 个答案:

答案 0 :(得分:1)

问题是您是在添加处理程序中添加删除处理程序而不是使用event delegation。因此,之前添加的删除元素将获得多个删除处理程序,导致x多次递减

&#13;
&#13;
jQuery(function ($) {
    var max = 5;
    var x = 0;
    $('#add').click(function (e) {
        if (x < max) {
            $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
            x++;
        }
    });
    $('#inp').on('click', '.remove_field', function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="inp"></div>
&#13;
&#13;
&#13;

问题:Demo

答案 1 :(得分:0)

这是一个小例子, 看到这个链接

http://jsfiddle.net/vh3Js/

希望这会对你有所帮助。

HTML:

<form id="myForm">
    <div style="margin-bottom:4px;" class="clonedInput">
        <input type="button" class="btnDel" value="Delete" disabled="disabled" />
        <input type="text" name="input1" />
    </div>

    <div>
        <input type="button" id="btnAdd" value="add another name" />
    </div>
</form>

JS:

$(document).ready(function() {

    var inputs = 1; 

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name','input'+ (++inputs) );
        $('.clonedInput:last').after(c);
    });

    $('.btnDel').click(function() {
        if (confirm('continue delete?')) {
            --inputs;
            $(this).closest('.clonedInput').remove();
            $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
        }
    });


});