添加和删​​除输入字段

Question

我在这里发现了两个错误：

1. 该数字将不会继续计数，例如下一个输入值将为4。 当前，当添加新输入时，该值为1。
2. 如果此处有3个输入字段，则删除按钮不起作用。 但是，如果再添​​加一个输入字段，则删除按钮将起作用。 无论如何，只能删除一个。

HTML

<div id="add_form">
<table>
    <tr>
        <td><input type="text" value="1"/></td>
        <td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td>
    </tr>
    <tr>
        <td><input type="text" value="2"/></td>
        <td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td>
    </tr>
    <tr>
        <td><input type="text" value="3"/></td>
        <td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td>
    </tr>
</table>
</div>
<a href="#" id="add_field">Add</a>

JQuery的

    $(document).ready(function() {

    var MaxInputs       = 99;
    var InputsWrapper   = $("#add_form table");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=1;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

            FieldCount++;

            $(InputsWrapper).append('<tr><td><input type="text" value="' +  x + '"/></td><td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td></tr>');
            x++;

        }

        return false;

    });

    $("body").on("click",".removeclass", function(e) {

        if( x > 1 ) {

            $(this).closest('tr').remove();
            x--;

        }

        return false;

    }) 

});

http://jsfiddle.net/hxbc7/

Answer 1

我已经更新了您创建的小提琴。 http://jsfiddle.net/hxbc7/12/

我更正了您的代码中的一个错误。

代替这条线

var InputsWrapper   = $("#add_form table");

它应该是

var InputsWrapper   = $("#add_form table tr");

Answer 2

尝试以下操作：计算FieldCount值并追加到文本框。

$(document).ready(function() {

    var MaxInputs       = 99;
    var InputsWrapper   = $("#add_form table");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=3;

    $(AddButton).click(function (e) {
        if(x <= MaxInputs) {

            FieldCount++;

            $(InputsWrapper).append('<tr><td><input type="text" value="' +  FieldCount + '"/></td><td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td></tr>');
            x++;

        }

        return false;

    });

    $("body").on("click",".removeclass", function(e) {

        if( x > 1 ) {

            FieldCount--;               
            $(this).closest('tr').remove();
            x--;

        }

        return false;

    }) 

});

Answer 3

像这样更改代码

    $(document).ready(function() {

    var MaxInputs       = 99;
    var InputsWrapper   = $("#add_form table");
    var AddButton       = $("#add_field");

    var x  = $("input[type=text]").length;
    var FieldCount=1;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

             x++;

            $(InputsWrapper).append('<tr><td><input type="text" value="' +  x + '"/></td><td><div class="remove"><a href="#" class="removeclass">Remove</a></div></td></tr>');


        }

        return false;

    });

    $("body").on("click",".removeclass", function(e) {

        if( x >= 1 ) {

            $(this).closest('tr').remove();
            x--;

        }

        return false;

    }) 

});