Add/Remove Input Fields Dynamically with jQuery

Add/Remove Input Fields Dynamically with jQuery

If you are looking to add and remove duplicate input fields, here’s another jQuery example below to do the task for you. This jQuery snippet adds duplicate input fields dynamically and stops when it reaches maximum.

JQUERY

$(document).ready(function() {

    var max_fields      = 10; //maximum input boxes allowed

    var wrapper         = $(".input_fields_wrap"); //Fields wrapper

    var add_button      = $(".add_field_button"); //Add button ID

    

    var x = 1; //initlal text box count

    $(add_button).click(function(e){ //on add input button click

        e.preventDefault();

        if(x < max_fields){ //max input box allowed

            x++; //text box increment

            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box

        }

    });

    

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text

        e.preventDefault(); $(this).parent('div').remove(); x--;

    })

});

HTML Code

Here’s HTML code you need to place within BODY tag of your page, perhaps within a FORM tag.

HTML

1 2 3 4

<div class="input_fields_wrap">     <button class="add_field_button">Add More Fields</button>     <div><input type="text" name="mytext[]"></div> </div>