Add and Remove Input Field

Question

I find two bugs at here:

1. The number will not continue counting, like will be 4 in next input value. Currently when add new input, the value is 1.
2. The remove button not working if have 3 input field there. But the remove button working if add one more input field. Anyway, only one can be delete.

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

I have updated the fiddle that you created. http://jsfiddle.net/hxbc7/12/

There was a mistake in your code that I rectified.

Instead of this line

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

it should be

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

Answer 2

change the code like this

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

    }) 

});

Answer 3

Try this: Count the FieldCount value and append to the textbox.

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

    }) 

});