添加和删​​除输入字段

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;

    }) 

});