Add dynamic Text boxes using JavaScript

vijayrami May 07, 2018 
<!DOCTYPE html>
<html>
<head>
 
    <title>HTML dynamic Text using JavaScript</title>
    <style>
 
 
 </style>
    <script>
    var counter = 1;
    function addTextBox() {     
     var textbox = document.createElement('input');
  textbox.type = 'text';
  textbox.id = 'text_'+counter;
  
  var buttonnode= document.createElement('input');
  buttonnode.setAttribute('type','button');
  buttonnode.setAttribute('name','delete');
  buttonnode.setAttribute('id','delete'+counter);
  buttonnode.setAttribute('value','x');
   
   var buttonnode = "<input type='button' onClick='deletetextbox(this.id)' nanme='delte' id='delte_"+counter+"' value='x'>";
   
   
     document.getElementById('mydata').appendChild(textbox);
     document.getElementById('mydata').innerHTML += buttonnode;
     counter++;
    }
    function deletetextbox(delete_id)
 {
     var deleteid = delete_id;
     var id = deleteid.split("_"); 
     var mydeleteid = id[1];
    
     document.getElementById("text_"+mydeleteid).remove();
     document.getElementById("delte_"+mydeleteid).remove();
 }
    </script>
</head>
<body>
<div id="myform">
 <input type="button" id="add" value="Add a Contact" onclick="addTextBox()"></td>
</div>
<div id="mydata"> 
</div>
</body>
</html>
Tags

Post a Comment

2 Comments