Add/remove multiple input fields dynamically with javascript

View Discussion

Nội dung chính Show

How do you add and remove input fields dynamically?
How do you add multiple input fields dynamically in react JS?
How do you add delete form input field dynamically in react JS?
How do you create a dynamic input field in HTML?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

In this article, we will learn how to add and remove input fields dynamically using jQuery with Bootstrap. So I will give you a brief on how we are going to achieve this functionality.

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

click() Method: The click() is an inbuilt method in jQuery that starts the click event or runs the function passed to it when a click event occurs.

Syntax:

$(selector).click(function);

Parameter: It accepts an optional parameter “function”, which will run when a click event occurs.
Return Value: It returns the selected element with the specified function to perform.

Append() Method: The append() method inserts specified content at the end of the selected elements.

Syntax:

$(selector).append(content)

Parameter: It accepts content as a parameter, the parameter can be HTML tags

Remove() Method: Removes the selected element.

Syntax:

$(selector).remove();

Parent() Method: Get the direct parent element of the selected element.

Syntax:

$(selector).parent();

CDN Links:

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:

HTML

<html lang="en">

<head>

<title>Add or Remove Input Fields Dynamicallytitle>

<link rel="stylesheet" href=

"//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href=

<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">GeeksforGeeksh2>
    <strong> Adding and Deleting Input fields Dynamicallystrong>
    <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> Deletebutton> 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.

 
How do you add and remove input fields dynamically?
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.
How do you add multiple input fields dynamically in react JS?
Add multiple input field dynamically in react.
 create an array in the state variable..
 assign a name to the dynamic input field with the help of array indexing like name0, name1..
 
How do you add delete form input field dynamically in react JS?
Add/Remove Input Fields Dynamically with React Js.
 Create AddRemoveInputField Component..
 Render AddRemoveInputField Component..
 Run App to Add & Remove Input Fields..
 
How do you create a dynamic input field in HTML?
Approach 1: Use document. createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the  element by appendChild() method. Finally append the  element to the  element of the document.