How to Add and Remove Input Fields Dynamically Using jQuery

In this tutorial, You will learn to add and remove input fields using jQuery. Even you will get the standard source code to quickly implement it in your project. This script will create a new input field and remove existing from the DOM dynamically by clicking a button or pressing Enter Key.

Why Need It –

Suppose that the user wants to enter multiple mobile numbers into the field at once. but you don’t know how many mobile numbers will be entered by the user. because more than one user may be inter their mobile numbers. They may have 5, 8, 15, 20, or more mobile numbers. So, In this case, you will have to create multiple input fields dynamically for each mobile number.

Working –

You can add new input fields by clicking the Add New button or pressing Enter Key.
You can also remove existing input fields by clicking the cross X button.

add remove input fields using jquery

Table of Contents

Add and Remove Input Fields Using jQuery

Before writing add remove input field the jQuery script, I suggest you create a folder structure like the following view for the testing purpose. Otherwise, You can use the given script directly in your project.

Read Also –

jQuery Form Validation Before Submit

1. Create an HTML Input Field

In this step, you will create an HTML input filed to perform its add and remove functionality. So, do it through the following steps –

Create a parent div with class="add-remove-form"
Create a child div with class="default-input” and also create a text input field with name="mobile[]" within it.
Also, Create another child div with class="new-input-area" to add a new input field dynamically
At last, create a button with class="add-new". It will add new input fields on the click event.

File Name – index.php

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--==== add remove input fields start====-->
<div class="add-remove-form">
<form>
<div class="default-input">
<input type="text" name="mobile[]" placeholder="Mobile Number">
</div>
<div class="new-input-area">
</div>

<button class="add-new">Add New</button>

</form>
</div>
<!--==== add remove input fields end====-->

<!---jquery library CDN--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!---custom jquery link--->
<script type="text/javascript" src="custom.js"></script>
</body>
</html>

You can use the following CSS code to design the input field –

<!---custom CSS link--->
<style type="text/css">
  *{
  padding:0px;
  margin:0px;
}
body, html{
  overflow-x:hidden;
}
.add-remove-form{
  width: 30%;
    background: #f9f9f9;
    height: auto;
    padding: 30px;
}
.new-input input[type="text"]
{
  width: 90%;
    float: left;
    padding: 6px;
    box-sizing: border-box;
    margin:10px 0px;


}
.default-input input[type="text"]
{
  float: left;
  width: 90% !important;
    padding: 6px;
    box-sizing: border-box;
    margin:10px 0px;

}

.default-input{
  text-align: right;
}
.add-new{
  cursor: pointer;
  text-align: right;
    border: 0px;
    background: #a5a5a5;
    color: white;
    padding: 6px 10px;
    margin: 10px 0px;
    position: relative;
    right: 40px;
}

.remove-input{
  cursor: pointer;
  float: right;
    margin: 10px 0px;
    border: 0px;
    padding: 8px 10px;
    color: red;
}
</style>

2. Add and Remove Input Fields with Jquery

To add and remove input fields, you have to write jquery code according to the following steps –

Create an input field with name=’mobile[]’ and a button with class=”remove-input” with a parent div class="new-input" . after that, assign it to the NewInputField
Apply click event on the button using .add-new and implement the next two steps within it
Declare e.preventDefault() to stop reloading the web page
Append the NewInputField to the div .new-input-area
Write two more scripts from the next step –
Apply click event on the button to remove the existing remove field.
Apply keydown event on the document to add new input fields on pressing Enter key.

File Name – custom.js

$(document).ready(function(){

// add input fields dynamically
var NewInputField=`<div class="new-input">
<input type="text" name='mobile[]' placeholder="Mobile Number"><button class="remove-input">X</button>
</div>`;
$(document).on('click','.add-new',function(e){
  e.preventDefault();
$(this).parents('.default-input').find('.new-input-area').append(NewInputField);
});

// remove input fields dynamically
$(document).on('click','.remove-input',function(e){
  e.preventDefault();
$(this).parent('.new-input').remove();
})

// add input field on pressing Enter Key
$(document).keydown(function (event) { 
     if (event.which == 13) { 
         event.preventDefault();
         $('.add-new').click(); 
         
     } 
    });


});

You must include custom.js in the index.php to work add & remove functionality perfectly. Here, You have seen it with a single input field. You can also integrate this code for more than one input field in your project.

My Suggestion

Dear Developers, Now you can easily implement the Add Remove Input Fields using jQuery in your project. If you have any doubts or questions related to this tutorial, you can ask me through the below comment box. I will reply as soon as possible.

Thanks For giving time to this tutorial…