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.
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 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();
});
|
That’s it for this tutorial. In next tutorial we will learn how to limit adding input fields.
.png)
0 comments :