<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById("content");
var newTBDiv = document.createElement("div");
newTBDiv.setAttribute("id","strText"+intTextBox);
newTBDiv.innerHTML = "Text"+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'>";
contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById("content");
contentID.removeChild(document.getElementById("strText"+intTextBox));
intTextBox = intTextBox-1;
}
}
</script>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<input type="button" onclick="addElement()" value="Add"> <br><input type="button" onclick="removeElement()" value="Remove"></p>
<div id="content" ></div>
</body>
</html>
