Add/Remove multiple input fields dynamically with jQuery

In this blog post, the following example demonstrates how to add/remove multiple input fields dynamically or we can say how to add/remove textbox dynamically with jQuery in a very simple way. It is very useful when you want to receive multiple inputs for the same field in an HTML form.

Keep reading on Simple jQuery Form Validation Example, Custom Paging in MVC using jQuery

How to add/remove textbox dynamically with jQuery

We will need to add the jQuery library, include the jQuery library before the following jQuery script. Find the full source code below:-

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>add/remove multiple input fields dynamically with jquery</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          var maxField = 10; //Input fields increment limitation
          var addButton = $('.add_button'); //Add button selector
          var wrapper = $('.field_wrapper'); //Input field wrapper
          var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button"><img src="remove-icon.png"/></a></div>'; //New input field html
          var x = 1; //Initial field counter is 1

          //Once add button is clicked
          $(addButton).click(function(){
            //Check maximum number of input fields
            if(x < maxField){
              x++; //Increment field counter
              $(wrapper).append(fieldHTML); //Add field html
            }
          });

          //Once remove button is clicked
          $(wrapper).on('click', '.remove_button', function(e){
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
          });
        });
    </script>
    <style type="text/css">
        input[type="text"] {
            height: 20px;
            vertical-align: top;
        }

        .field_wrapper div {
            margin-bottom: 10px;
        }

        .add_button {
            margin-top: 10px;
            margin-left: 10px;
            vertical-align: text-bottom;
        }

        .remove_button {
            margin-top: 10px;
            margin-left: 10px;
            vertical-align: text-bottom;
        }
    </style>
</head>
<body>
    <h2>How to add / remove textbox dynamically with jQuery</h2>
    <div class="container">
        <form action="" method="post">
            <div class="field_wrapper">
                <div>
                    <input type="text" placeholder="Enter your skills:" name="field_name[]" value="" />
                    <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png" /></a>
                </div>
            </div>
            <input type="submit" name="submit" value="SUBMIT" />
        </form>
    </div>
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on how to add/remove multiple input fields dynamically with jquery. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.