Dynamically Create And Remove Textboxes Using jQuery

In this example, you will learn how to dynamically create and remove textboxes using jQuery. You can see the code given below along with a demo to understand what happens inside of the HTML and jQuery to create a dynamic textbox and remove button over here. jQuery has made our life simple and gives you pretty procedures to handle the HTML and CSS. In this example, you can see a button which is used to create dynamic textboxes and also one more button is given to show the values of dynamically created textboxes.

The program is pretty simple to understand and execute. The following jQuery code lets you get the approach to create a dynamic textbox and button.

jQuery code to handle dynamic textbox creation,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#buttonAdd").bind("click", function () {
var div = $("<div />");
div.html(GenerateTextbox(""));
$("#TextBoxContainer").append(div);
});
$("#buttonGet").bind("click", function () {
var values = "";
$("input[name=CreateTextbox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GenerateTextbox(value) {
return '<input name = "CreateTextbox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
</script>

HTML code lets you add and show buttons.

<input id="buttonAdd" type="button" value="Click here to Add Textbox" />
<div id="TextBoxContainer">
</div>
<input id="buttonGet" type="button" value="Show Values" />

Explanation

In the given example, when we click “buttonAdd” button, it will fire a click event using jQuery. The event will cause it to generate a div and finally will call a function named GenerateTextbox(). The function is going to return textbox and remove button respectively. Whenever you click “buttonAdd”, you will see a textbox and a button nested with a <div> tag.

Finally, this example lets you know how to dynamically create and remove textboxes using jQuery. Subscribe to us to get daily updates.

2 Comments

Join the conversation! Your thoughts help the community grow.

Kunind Oberoi8y ago
Is this a joke? haha good one.
- Mahesh Chand8y ago
  Please be specific in your comment, so it can be used a positive criticism and author can improve based on that feedback. It's a community. Be nice. Follow the rules. Here on this community, we do not mock people. We nurture, support, promote, guide, and motivate. If there is anything wrong, we provide critics in a positive manner with the solution that you think is correct. This is how we grow together. Thanks.