How to add and remove input fields dynamically using jQuery with Bootstrap ?

Last Updated : 31 Jul, 2024

In this article, we will learn how to add and remove input fields dynamically using jQuery with Bootstrap. The input fields will be added and removed from the HTML document dynamically using jQuery.

In this process, we will use the following multiple functions.

Click() Method: Used to attach the click event to the button
Append() Method: Used to append the HTML of the new input field to the document.
Remove() Method: Used to remove the input field from the document.
Parent() Method: Used to select the parent element of a child element.

CDN Links:

<!-- Bootstrap CSS CDN -->
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>
<!-- Bootstrap JS CDN -->
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css”>
<!-- jQuery CDN -->
<script src=”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Approach:

Firstly, add the jQuery, and Bootstrap CDN to the script or download them to your local machine.
Create an input group and add an input field along with a button. i.e. this button will be used to delete this input field.
Create a button and on clicking this button we will dynamically add the input fields.
Now write the click() function to handle the adding and removing functionality.
Use the append() method to add the input field code to the existing HTML document.

$('#newinput').append(newRowAdd);

Use the remove() method to remove the input field from the document.

$(this).parents("#row").remove();

Add some styling to the page using the bootstrap.

Example: In this example, the above methods are implemented to add and remove the input field.

HTML

<!doctype html>
<html lang="en">
  
<head>
    <title>Add or Remove Input Fields Dynamically</title>
    <link rel="stylesheet" 
          href=
"//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <script src=
"//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            margin-top: 1%;
            justify-content: center;
            align-items: center;
        }

        #rowAdder {
            margin-left: 17px;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong> 
          Adding and Deleting Input fields Dynamically
      </strong>
    <div style="width:40%;">
        <form>
            <div class="">
                <div class="col-lg-12">
                    <div id="row">
                        <div class="input-group m-3">
                            <div class="input-group-prepend">
                                <button class="btn btn-danger" 
                                        id="DeleteRow" 
                                        type="button">
                                    <i class="bi bi-trash"></i>
                                    Delete
                                </button>
                            </div>
                            <input type="text" class="form-control m-input">
                        </div>
                    </div>

                    <div id="newinput"></div>
                    <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD
                    </button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        $("#rowAdder").click(function () {
            newRowAdd =
                '<div id="row"> <div class="input-group m-3">' +
                '<div class="input-group-prepend">' +
                '<button class="btn btn-danger" id="DeleteRow" type="button">' +
                '<i class="bi bi-trash"></i> Delete</button> </div>' +
                '<input type="text" class="form-control m-input"> </div> </div>';

            $('#newinput').append(newRowAdd);
        });
        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })
    </script>
</body>
</html>

Output:

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.