eSolutionsG: Remove Button

Showing posts with label Remove Button. Show all posts

jQuery Add/Remove Input Fields Dynamically

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.

HTML Markup

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

<button id="add">Add Field</button>

</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 type="text" name="input[]"><button  class="delete">Delete</button></div>
');
});

//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 type="text" name="input[]"><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();
});

$("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.

Subscribe to: Posts ( Atom )

Add More Input Fields Using jQuery With Remove Button

HTML Markup

jQuery

Delete button

Popular Posts

Labels

About us

Labels

Translate

Add More Input Fields Using jQuery With Remove Button

HTML Markup

jQuery

Delete button

Share story

Popular Posts

Labels