Add/remove multiple input fields dynamically with javascript

View Discussion

Improve Article

Save Article

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

    Add or Remove Input Fields Dynamically