how to add or remove textbox dynamically using jquery

1. Problem

Have you ever come across a problem where you have to create textbox dynamically. If yes, then you are landed on right place. In this article i will share a very simple script by which you can create textbox dynamically. I am using jQuery to create textbox dynamically. So lets begin.

2. Solution

I am sharing the snippets below. You have to just include this snippets in your html & it will work as expected. Hope you like it.

1. HTML

     


       
Name
       
Phone
       
Email ID
       

      

     


       

       

       

       

       
      

    

2. jQuery

$(document).ready(function() {
   // ADD OR REMOVE ITEM
   $(document).on('click', '.addItem', function(e) {
    e.preventDefault();

    var controlForm = $('.items-wrapper:first'),
     currentEntry = $(this).parents('.single-item:first'),
     newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    newEntry.find('select').val('');
    controlForm.find('.single-item:not(:last) .addItem')
     .removeClass('addItem').addClass('removeItem')
     .removeClass('btn-success').addClass('btn-danger')
     .html('');
   }).on('click', '.removeItem', function(e) {
    $(this).parents('.single-item:first').remove();
    e.preventDefault();
    return false;
   });
  });

Note: Don't forget to include bootstrap.css & jQuery library in your html page


The final result is here: