Dynamically Create And Remove Textboxes Using jQuery

In this tutorial, we are going to see how to 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">
    <!--Textboxes will be added here -->
</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.