CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sj2012
sj2012

Reputation: 63

Limit Add HTML Element inside div using JavaScript

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

Upvotes: 0

Views: 580

Answers (7)

S Raghav
S Raghav

Reputation: 1526

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

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 4

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

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

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

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>

Upvotes: 4

Akram Chauhan
Akram Chauhan

Reputation: 1156

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>

Upvotes: 0

Negi Rox
Negi Rox

Reputation: 3922

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--;
});

Upvotes: 1

Lalit
Lalit

Reputation: 1369

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.

Upvotes: 1

Related Questions