By using jquery you can add or duplicate more input fields with delete button near to it and you can remove the filed on delete button click.

jQuery Add/Remove Input Fields Dynamically

HTML Markup


<button id="add">Add Field</button>
<div id="items">
 <div><input type="text" name="input[]"></div>
</div>

First we have a single input box inside of a div with the id of “items” and a button which says “Add Field”.

Inside of $(document).ready function place the below jQuery code.

jQuery


//when the Add Field button is clicked
$("#add").click(function (e) {
 //Append a new row of code to the "#items" div
 $("#items").append('<div><input name="input[]" type="text" /><button class="delete">Delete</button></div>'); });

Now, whenever you click on “Add Field” a new input field with delete button will be added.

When a delete button is clicked we need to remove the corresponding input field using the below code.

Delete button


$("body").on("click", ".delete", function (e) {
	$(this).parent("div").remove();
});

That’s it for this tutorial. In next tutorial we will learn how to limit adding input fields.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

10 comments on “Add More Input Fields Using jQuery With Remove Button”

Leave a Reply

Your email address will not be published. Required fields are marked *