Add More Input Fields Using jQuery With Remove Button

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 *