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.

add-remove-fields

If you read comment lines carefully, the process is pretty straight forward. We start with 1 input field and let user add more fields until the count reaches maximum. Same process goes to delete button, when clicked, it removes current text field by removing the parent element, which is div element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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.

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>

Demo

We start with single Input field and a “Add more Field” button to allow user to add more fields. The text input field is wrapped in div element, as explained above, on delete button click, it finds parent element, which is a div and removes it.
Capture array values using PHP from these input fields in next post.

171 Comments Add Comment

  • i want to add or update at time multiple

     Reply
  • Excellent work!

    For those who was not able to replicate the code – it should be a script error!

     Reply
  • It worked fine for me with few configurations – Thanks!

     Reply
  • If my input looks like this

    how do I get the file name to display to user? Trying to allow them to select 10 pdf’s and display these on the screen.

     Reply
  • Excelente ,muchas gracias!

     Reply
  • how can I return the value of the text on edit?
    I want to return the values on the field so that i can update it?

     Reply
  • Nice Example, Very Short and Clean, Thanks a lot.

     Reply
  • Thanks for sharing the code, working fine with my php code.

     Reply
  • ok i got it just add this before body

     Reply
  • Its not working. i have copied and pasted in my jsp but its not working

     Reply
  • $(wrapper).on(“click”,”.remove_field”, function(e){ //user click on remove text
    e.preventDefault(); $(this).parent(‘div’).remove(); x–;
    })
    what the purpose of on function here?

     Reply
  • $(wrapper).on(“click”,”.remove_field”, function(e){ //user click on remove text
    e.preventDefault(); $(this).parent(‘div’).remove(); x–;
    })
    here why u use on only why not use click

     Reply
  • Many thanks for this. Could you please tell me why the syntax to remove a field is different? ie. why does this not work?

    $(“.remove_field”).click(function(e){
    e.preventDefault();
    $(this).parent(‘div’).remove();
    x–;
    })

    I know this doesn’t work because I have tried it but I don’t understand why. I thought it would work just the same in finding the parent_div but instead it reloads the entire page.

     Reply
  • how to put the values into a database ?

     Reply
    • sumit kumar dey

      you can call all text box like a array…example if textbox name “mytext[]”
      print_r($_POST[“mytext”]);
      now connect with db and put values db.

  • There is a problem.

    If a user inputs just one input type, jQuery makes a String but when user uses multiple inputs (created dynamically), jQuery makes an array of Strings. How to solve it?

     Reply
  • I have a question.
    How can i ad 2 inputs everytime I add a row?
    I would like to add a row each time in which you can type the number and behind it select the right product.

     Reply
  • If user deletes any textbox in between how to update textbox id ?

    Say user deletes textbox at second row so how to make textbox with id 3 at row 3 as id 2?

     Reply
  • I remember using this script 5 years ago to create my first php application. Good work man :)

     Reply
  • Very helpfull thanks! I’ve one question, because I’m using this for a whole row of input-fields.

    And because of the “$(this).parent(‘div’).remove” it only removes the last from the last div (in my exemple description2). But I want it to remove de whole row.
    How can I do this?

     Reply
  • Thanks a lot!

     Reply
  • why can’t I do it right? even though i’ve copied it

     Reply
  • NIce one, Short and Sweet to understand

     Reply
  • Thanks very much!!

    Helped a lot.

     Reply
  • Thanks, helped me a lot!

     Reply
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    $(document).ready(function () {

                var max_fields = 150; //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 &lt; max_fields) { //max input box allowed
                        x++; //text box increment
                     
                        $(wrapper).append(&#039;<a href="#" rel="nofollow">Remove</a>'); //add input box
                    }
                });

             

                $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
                    e.preventDefault(); $(this).parent('div').remove(); x--;
                })
            });

    How Can I Gett My All textbox values?

     Reply