In this blog, we are adding input field by clicking on more button and removing input field by clicking on erase button. The procedure of doing this is very simple and easy. I have provided the code for doing this below .

In below code first we are taking one field and letting include more fields on More button click until the number reaches the most . For erase button, when we clicked on it, it will erase the current input field. Below is the jquery code.

$(document).ready(function() {
    var max      = 5; //maximum input boxes allowed
    var container         = $(".wraper");  
    var add      = $(".add_icon"); //Plus sign id
   
    var x = 1; //input field count intially
    $(add).click(function(e){         e.preventDefault();
        if(x < max){ //maximum number of input field allowed
            x++; //input field increment
            $(container).append('<div><input type="text" name="text[]"/><a href="#" class="delete">delete</a></div>'); //adding new input field
        }
    });
   
    $(container).on("click",".delete", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Below is the html code.

<div class="wraper">
    
   <div><input type="text" name="text[]"> <button class="add_icon">More</button>
  </div>
</div>