Dynamically Add Remove Textbox using jquery and Bootstrap

In today’s era, we website designers and developers needs to add some text area like repeater fields into our webpage. If you are also searching for such a tutorial or code then you are at right place. You can use the codes into your projects and website. It is free to use. Go ahead to the get the step by step code. If you just want the complete code then you can go ahead to the end of this tutorial.

Step 1:

First of all, we have to add the script and style-sheet for bootstrap and jquery implementation. So add the following code into <head> tag of you page

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

step 2:

Now add the script and some styles into head section again.

<style type="text/css">
 * {
 .border-radius(0) !important;
 }
 #field {
 margin-bottom:20px;
 }
 .input {
    width: 96%;
    float: left;
    margin-right: 5px;
 }
</style>
<script type="text/javascript">
 $(document).ready(function(){
     var next = 1;
     $(".add-more").click(function(e){
         e.preventDefault();
         var addto = "#field" + next;
         var addRemove = "#field" + (next);
         next = next + 1;
         var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
         var newInput = $(newIn);
         var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
         var removeButton = $(removeBtn);
         $(addto).after(newInput);
         $(addRemove).after(removeButton);
         $("#field" + next).attr('data-source',$(addto).attr('data-source'));
         $("#count").val(next);  
         
             $('.remove-me').click(function(e){
                 e.preventDefault();
                 var fieldNum = this.id.charAt(this.id.length-1);
                 var fieldID = "#field" + fieldNum;
                 $(this).remove();
                 $(fieldID).remove();
             });
     });  
 });
</script>

* {

.border-radius(0) !important;

}

#field {

margin-bottom:20px;

}

.input {

width: 96%;

float: left;

margin-right: 5px;

}

</style>

$(document).ready(function(){

var next = 1;

$(".add-more").click(function(e){

e.preventDefault();

var addto = "#field" + next;

var addRemove = "#field" + (next);

next = next + 1;

var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';

var newInput = $(newIn);

var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';

var removeButton = $(removeBtn);

$(addto).after(newInput);

$(addRemove).after(removeButton);

$("#field" + next).attr('data-source',$(addto).attr('data-source'));

$("#count").val(next);

$('.remove-me').click(function(e){

e.preventDefault();

var fieldNum = this.id.charAt(this.id.length-1);

var fieldID = "#field" + fieldNum;

$(this).remove();

$(fieldID).remove();

});

</script>

Step 3:

Now add the following html code into <body> tag.

<div class="container">
 <div class="row">
  <div class="col-sm-12">
  <input type="hidden" name="count" value="1" />
        <div class="control-group" id="fields">
            <label class="control-label" for="field1">Dynamically Add/Remove Fields</label>
            <div class="controls" id="profs"> 
                <form class="input-append">
                    <div id="field">
                     <input autocomplete="off" class="dcs_field input form-control" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/>
                     <button id="b1" class="btn add-more" type="button">+</button>
                    </div>
                </form>
            <br>
            <small>Press + to add another form field :)</small>
            </div>
        </div>
 </div>
 </div>
</div>

<label class="control-label" for="field1">Dynamically Add/Remove Fields</label>

</div>

</form>

<br>

<small>Press + to add another form field :)</small>

</div>

Complete Code:

Try it

<html>
<head>
<title>Code To Dynamically add and remove fields with jquery</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
 * {
 .border-radius(0) !important;
 }
 #field {
 margin-bottom:20px;
 }
 .input {
    width: 96%;
    float: left;
    margin-right: 5px;
 }
</style>
<script type="text/javascript">
 $(document).ready(function(){
     var next = 1;
     $(".add-more").click(function(e){
         e.preventDefault();
         var addto = "#field" + next;
         var addRemove = "#field" + (next);
         next = next + 1;
         var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
         var newInput = $(newIn);
         var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
         var removeButton = $(removeBtn);
         $(addto).after(newInput);
         $(addRemove).after(removeButton);
         $("#field" + next).attr('data-source',$(addto).attr('data-source'));
         $("#count").val(next);  
         
             $('.remove-me').click(function(e){
                 e.preventDefault();
                 var fieldNum = this.id.charAt(this.id.length-1);
                 var fieldID = "#field" + fieldNum;
                 $(this).remove();
                 $(fieldID).remove();
             });
     });  
 });
</script>
</head>
<body>
<div class="container">
 <div class="row">
  <div class="col-sm-12">
  <input type="hidden" name="count" value="1" />
        <div class="control-group" id="fields">
            <label class="control-label" for="field1">Dynamically Add/Remove Fields</label>
            <div class="controls" id="profs"> 
                <form class="input-append">
                    <div id="field">
                     <input autocomplete="off" class="dcs_field input form-control" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/>
                     <button id="b1" class="btn add-more" type="button">+</button>
                    </div>
                </form>
            <br>
            <small>Press + to add another form field :)</small>
            </div>
        </div>
 </div>
 </div>
</div>
</body>
</html>

<html>

<head>

<title>Code To Dynamically add and remove fields with jquery</title>

* {

.border-radius(0) !important;

}

#field {

margin-bottom:20px;

}

.input {

width: 96%;

float: left;

margin-right: 5px;

}

</style>

$(document).ready(function(){

var next = 1;

$(".add-more").click(function(e){

e.preventDefault();

var addto = "#field" + next;

var addRemove = "#field" + (next);

next = next + 1;

var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';

var newInput = $(newIn);

var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';

var removeButton = $(removeBtn);

$(addto).after(newInput);

$(addRemove).after(removeButton);

$("#field" + next).attr('data-source',$(addto).attr('data-source'));

$("#count").val(next);

$('.remove-me').click(function(e){

e.preventDefault();

var fieldNum = this.id.charAt(this.id.length-1);

var fieldID = "#field" + fieldNum;

$(this).remove();

$(fieldID).remove();

});

</script>

</head>

<body>

<label class="control-label" for="field1">Dynamically Add/Remove Fields</label>

</div>

</form>

<br>

<small>Press + to add another form field :)</small>

</div>

</body>

</html>