Add And Remove Text box Dynamically Using JavaScript Example

in javascript add and remove text box, Demo of adding and removing textboxes dynamically using simple JavaScript Example.

Simply use two JavaScript functions:

  • add_field(): It first gets or fetch the data element id where we want to added a new element followed by creation of fresh element and appending it inside the html form element.
  • remove_field(): It removes/deletes the last added new element.

add and remove html elements dynamically with jquery

Read Also:  Laravel 6 Get Last Inserted ID using Eloquent

Dynamically Adding and Removing Text Boxes using JavaScript

The Markup and the Script
index.html

<html>
<head>
<title>Demo of adding and removing textboxes dynamically using simple JavaScript</title>
<script>
function add_field()
{
  var all_count_rows=document.getElementsByClassName("add_remove_input_form_txt");
  all_count_rows=all_count_rows.length+1;
  document.getElementById("field_div").innerHTML=document.getElementById("field_div").innerHTML+
  "<p id='input_text"+all_count_rows+"_wrapper'><input type='text' class='add_remove_input_form_txt' id='add_remove_input_form_txt"+all_count_rows+"' placeholder='Enter Your Text'><input type='button' value='Remove' onclick=remove_field('add_remove_input_form_txt"+all_count_rows+"');></p>";
}
function remove_field(id)
{
  document.getElementById(id+"_wrapper").innerHTML="";
}
</script>
<style>
body
{
  margin:0 auto;
  padding:0;
  text-align:center;
  height:2000px;
  background-color:silver;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
input[type="text"]
{
  width:200px;
  height:35px;
  margin-right:2px;
  border-radius:3px;
  border:1px solid green;
  padding:5px;
}
input[type="button"]
{
  background:none;
  color:white;
  border:none;
  width:110px;
  height:35px;
  border-radius:3px;
  background-color:green;
  font-size:16px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="field_div">
        <input type="button" value="Add TextBox" onclick="add_field();">
    </div>
</div>
</body>
</html>

dynamically add multiple text boxes javascript

Read Also:  PHP Get Folder Path From File Path Examples

Example : dynamically add textbox on button click javascript

index.html

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically - www.pakainfo.com</title>
<script type=”text/javascript”>
var add_remove_input_form_txt=0;
 
//FUNCTION TO ADD TEXT BOX ELEMENT
function add_field()
{
add_remove_input_form_txt = add_remove_input_form_txt + 1;
var all_count_rows = document.getElementById(‘content’);
var newTBDiv = document.createElement(‘div’);
newTBDiv.setAttribute(‘id’,'strText’+add_remove_input_form_txt);
newTBDiv.innerHTML = “Text “+add_remove_input_form_txt+”: <input type=’text’ id=’” + add_remove_input_form_txt + “‘ name=’” + add_remove_input_form_txt + “‘/>”;
all_count_rows.appendChild(newTBDiv);
}
 
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_field()
{
if(add_remove_input_form_txt != 0)
{
var all_count_rows = document.getElementById(‘content’);
all_count_rows.removeChild(document.getElementById(‘strText’+add_remove_input_form_txt));
add_remove_input_form_txt = add_remove_input_form_txt-1;
}
}
</script>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript - www.pakainfo.com</p>
<p><a href=”javascript:add_field();” >Add</a> <a href=”javascript:remove_field();” >Remove</a></p>
<div id=”content”></div>
</body>
</html>

I hope you get an idea about javascript add and remove text box.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Remove null values from array in PHP