Limit Add HTML Element inside div using JavaScript

Question

Using this javascript able add any amount of text field by clicking Add option. I want to stop showing Add Option After 6 text field added. How can i limit it after 6? Any help?

 $('.add').click(function() { $('.block:last').before(' <div class="block"><input type="text" /><span class = "remove" > Remove Option < /span></div > '); }); $('body').on('click', '.remove', function() { $(this).parent('.block').remove(); }); 

 .block { display: block; } enter code here input { width: 50%; display: inline-block; } span { display: inline-block; cursor: pointer; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> HTML <div class="optionBox"> <div class="block"> <input type="text" /> </div> <div class="block"> <span class="add">Add Option</span> </div> </div> 

Working fiddle

Answer 1

Create a variable, which will store counts, increase it while adding input and decrease it while removing input and hide button accordingly

 $(document).ready(function() { var i = 0; $('.add').click(function() { if (i < 5) { $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); } i++ hidebtn() }); $('body').on('click', '.remove', function() { $(this).parent('.block').remove(); i-- hidebtn() }); function hidebtn() { if (i >= 5) { $('.add').hide(); } else $('.add').show(); } }) 

 .block { display: block; } input { width: 50%; display: inline-block; } span { display: inline-block; cursor: pointer; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="optionBox"> <div class="block"> <input type="text" /> </div> <div class="block"> <span class="add">Add Option</span> </div> </div> 

Answer 2

You don't need to create any variable. You can simply use $(".block").length to check how many inputs are present:

 $('body').on('click', '.add', function() { if ($(".block").length <= 6) { $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); } $(".block").length > 6 ? $('.add').hide() : $('.add').show(); }); $('body').on('click', '.remove', function() { $(this).parent('.block').remove(); $('.add').show(); }); 

 .block { display: block; } input { width: 50%; display: inline-block; } span { display: inline-block; cursor: pointer; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="optionBox"> <div class="block"> <input type="text" /> </div> <div class="block"> <span class="add">Add Option</span> </div> </div> 

Answer 3

I have updated the fiddle. Please check below link. working code updated fiddle

Steps :-

1. Use counter var inputs = 0;
2. Increment its value in add function.
3. Decrement its value in remove function.

Answer 4

I updated your fiddle. please check below.

https://jsfiddle.net/Negirox/9tbet1xt/5/

please update your js.

var counter=0;
$('.add').click(function () {
if(counter<5)
{
 $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
 counter++;
}
  else
  {
   alert("You exceeded a limit");
  }
});

$('body').on('click', '.remove', function () {
  $(this).parent('.block').remove();
  counter--;
});

Answer 5

You need to keep track of the current number of fields using a counter variable (or even better to avoid the nasty global. See this answer )

HTML

<div class="optionBox">
  <div class="block">
    <input type="text" />
  </div>
  <div id="adderButton" class="block">
     <span class="add">Add Option</span>
  </div>
</div>

JS

var counter = 0;
// good to declare constants like this to avoid "magic numbers" in code
var LIMIT = 5;
$('.add').click(function () {
   if(counter < LIMIT){
     $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
     counter += 1;
   }
   else {
    // dont show the option if we have exceeded the count
    $("#adderButton").hide();
   }
});

$('body').on('click', '.remove', function () {
    $(this).parent('.block').remove();
    counter -= 1;
    $("#adderButton").hide();
});

UPDATE

Since all other answers give readymade solutions to the OP's question. I'd like to enhance mine into a tutorial on how to solve similar problems for anyone interested.

Problem:

Dynamically add and remove elements upto a certain limit in JQuery

Points to ponder

1. When limit is reached, hide "adding" button and prevent adding further elements
2. If limit is not reached, show add button and allow adding further

The allow/disallow logic is based on the LIMIT that you specify. Here are some scenarios

1. While LIMIT has not been reached, show the Add option. Add 1 to the count (implicitly or explicitly)
2. If LIMIT has been reached, remove the add button
3. If an element is removed then the current no. of elements is < LIMIT, so show the Add option

Answer 6

Did it with a if statement and increment-decrement values...

 var count = 0; $('.add').click(function () { if(count<6) { $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); alert(count); count++; if (count==5) { $('.add').hide(); } } }); $('body').on('click', '.remove', function () { $(this).parent('.block').remove(); $('.add').show(); alert(count); count--; }); 

 .block { display: block; } input { width: 50%; display: inline-block; } span { display: inline-block; cursor: pointer; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="optionBox"> <div class="block"> <input type="text" /> </div> <div class="block"> <span class="add">Add Option</span> </div> </div> 

Edit: Added the hide/show Add input functionality

Answer 7

Its Quite Simple.

 var i=1; $('.add').click(function () { if(i>=6){ }else{ i = i+1; $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); } }); $('body').on('click', '.remove', function () { i = i-1; $(this).parent('.block').remove(); }); 

 .block { display: block; } input { width: 50%; display: inline-block; } span { display: inline-block; cursor: pointer; text-decoration: underline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="optionBox"> <div class="block"> <input type="text" /> </div> <div class="block"> <span class="add">Add Option</span> </div> </div>