Add and Remove Input Fields 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 on 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

 

How to Add 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.

my-project/
    |__add-remove-input.html
    |__add-remove-script.js
    |__style.css

Read Also –

jQuery Form Validation Before Submit

Read More Or Read Less Using jQuery

1. Create Add Remove Input Fields Using HTML

To create add remove input fields, You have to do the following things in add-remove-input.php

  • Include custom external CSS file using the following link tag.
<link rel="stylesheet" href="style.css" type="text/css">
  • Include the following jQuery library CDN  to execute custom jquery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  • Include custom external ( add remove input field ) script file using the following tag.
<script type="text/javascript" src="add-remove-script.js"></script>
  • Write the following HTML code to create add remove input field.
<!--==== add remove input fields start====-->
<div class="add-remove-form">
<h4>Add Remove Input Fields Dynamically</h4>
<br>
<form>

<div class="default-input">
<input type="text" name="mobile[]" placeholder="Mobile Number">
<div class="new-input-area">
</div>
<button class="add-new">Add New</button>

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

Complete HTML Code

Use the following complete HTML code to create add remove input fields directly in your project.

File name – add-remove-input.php

<!DOCTYPE html>
<html>
<head>

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<!---custom CSS link--->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!--==== add remove input fields start====-->
<div class="add-remove-form">
<h4>Add Remove Input Fields Dynamically</h4>
<br>
<form>

<div class="default-input">
<input type="text" name="mobile[]" placeholder="Mobile Number">
<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="add-remove-script.js"></script>
</body>
</html>

 

2. Customize Add Remove Input Fields Using CSS

Use the following CSS Code to add remove input field.

File name – style.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;
}

 

3. Create Add Remove Script Using jQuery

  • First, assign input fields with class="new-input" to a new variable NewInputField
  • Append new input fields in section class .new-input-area on clicking Add New button class .add-new.
  • Remove the existing input fields from with section class .new-input on clicking cross X button .remove-input.
  • Trigger Click event to Add New Button class .add-new to append new input fields on pressing Enter Key.

File name – add-remove-input.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(); 
         
     } 
    });


});

 

Summary:

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 on this tutorial…

Leave a Comment