Post
Ask Question

How to Add or Remove Dynamic TextBox using jQuery

Add jQuery library in your page

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
Write some script for add or remove
  1. <script type="text/javascript">  
  2. $(document).ready(function () {  
  3. $('#add').click(function () {  
  4. var table = $(this).closest('table');  
  5. console.log(table.find('input:text').length);  
  6. if (table.find('input:text').length < 50) {  
  7. var x = $(this).closest('tr').nextAll('tr');  
  8. $.each(x, function (i, val) {  
  9. val.remove();  
  10. });  
  11. table.append('  
  12.     <tr>  
  13.         <td style="width:200px;" align="right">First Name   
  14.             <td>  
  15.                 <input type="text" id="current Name" value="" />  
  16.             </td>  
  17.             <td style="width:200px;" align="right">Last Name   
  18.                 <td>  
  19.                     <input type="text" id="current Name" value="" />  
  20.                 </td>  
  21.             </tr>');  
  22. $.each(x, function (i, val) {  
  23. table.append(val);  
  24. });  
  25. }  
  26. });  
  27. $('#del').click(function () {  
  28. var table = $(this).closest('table');  
  29. if (table.find('input:text').length > 1) {  
  30. table.find('input:text').last().closest('tr').remove();  
  31. }  
  32. });});  
  33.   
  34. </script>
Then create design whether you want to show this.
  1. <table border="0" cellspacing="2">  
  2.     <tr>  
  3.         <td style="width:200px;" align="right">Name  
  4.   
  5.             <td>  
  6.                 <input type="text" id="Job Name" value="" />  
  7.             </td>  
  8.         </td>  
  9.     </tr>  
  10.     <tr>  
  11.         <td align="right">Versions</td>  
  12.         <td>  
  13.             <select id="version" style="width:350px;">  
  14.                 <option value="">SELECT</option>  
  15.             </select>  
  16.         </td>  
  17.     </tr>  
  18.     <tr>  
  19.         <td align="right">Test Scripts</td>  
  20.         <td>  
  21.             <select id="testscripts" style="width:350px;"></select>  
  22.         </td>  
  23.     </tr>  
  24.     <tr>  
  25.         <td align="right">datas</td>  
  26.         <td>  
  27.             <input type="button" id="add" value="Add" />  
  28.             <input type="button" id="del" value="Del" />  
  29.         </td>  
  30.     </tr>  
  31.     <tr>  
  32.         <td style="height:3px" colspan="2"></td>  
  33.     </tr>  
  34. </table>
Now your code looks like the following:

AddTextbox page
  1. <html>  
  2.     <head>  
  3.         <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  4.         <script type="text/javascript">  
  5. $(document).ready(function () {  
  6. $('#add').click(function () {  
  7. var table = $(this).closest('table');  
  8. console.log(table.find('input:text').length);  
  9. if (table.find('input:text').length < 50) {  
  10. var x = $(this).closest('tr').nextAll('tr');  
  11. $.each(x, function (i, val) {  
  12. val.remove();  
  13. });  
  14. table.append('  
  15.             <tr>  
  16.                 <td style="width:200px;" align="right">First Name   
  17.                     <td>  
  18.                         <input type="text" id="current Name" value="" />  
  19.                     </td>  
  20.                     <td style="width:200px;" align="right">Last Name   
  21.                         <td>  
  22.                             <input type="text" id="current Name" value="" />  
  23.                         </td>  
  24.                     </tr>');  
  25. $.each(x, function (i, val) {  
  26. table.append(val);  
  27. });  
  28. }  
  29. });  
  30. $('#del').click(function () {  
  31. var table = $(this).closest('table');  
  32. if (table.find('input:text').length > 1) {  
  33. table.find('input:text').last().closest('tr').remove();  
  34. }  
  35. });});  
  36.                 </script>  
  37.             </head>  
  38.             <body>  
  39.                 <table border="0" cellspacing="2">  
  40.                     <tr>  
  41.                         <td style="width:200px;" align="right">Name  
  42.   
  43.                             <td>  
  44.                                 <input type="text" id="Job Name" value="" />  
  45.                             </td>  
  46.                         </td>  
  47.                     </tr>  
  48.                     <tr>  
  49.                         <td align="right">Versions</td>  
  50.                         <td>  
  51.                             <select id="version" style="width:350px;">  
  52.                                 <option value="">SELECT</option>  
  53.                             </select>  
  54.                         </td>  
  55.                     </tr>  
  56.                     <tr>  
  57.                         <td align="right">Test Scripts</td>  
  58.                         <td>  
  59.                             <select id="testscripts" style="width:350px;"></select>  
  60.                         </td>  
  61.                     </tr>  
  62.                     <tr>  
  63.                         <td align="right">datas</td>  
  64.                         <td>  
  65.                             <input type="button" id="add" value="Add" />  
  66.                             <input type="button" id="del" value="Del" />  
  67.                         </td>  
  68.                     </tr>  
  69.                     <tr>  
  70.                         <td style="height:3px" colspan="2"></td>  
  71.                     </tr>  
  72.                 </table>  
  73.             </body>  
  74.         </html>  

Figure 1: Output
Next Recommended Reading Dynamically Adding And Removing TextBoxes On A Button Click Using jQuery