0

I am cloning the content of div "template" into the div "placeholder" using 'add more' button.

I would like once I added 5 rows the add button to dissapear and once I remove one of the 5 to show again and be able to add again rows until they rich 5.

At the moment, because of if statement once I remove the rows the add button doesn't add anything as it has the condition to do it 5 times just.

Please help.

<div id="template">Clone me</div>

<div id="placeholder">
</div>

<div class="add">
 <button class="add-row" type="button">Add more</button>
</div> 

var maxAppend = 0;
$( ".add-row" ).click(function(){
maxAppend++;
if (maxAppend<5) {
  $( "#template" ).clone().appendTo("#placeholder").append('<div    class="remove"><button class="remove-row">Remove product</button></div>').find('input').val('');
}
});

$( "body" ).on('click', '.remove-row', function(){
 $(this).closest('#template').remove();
});
Acdn
  • 568
  • 2
  • 13
  • 26

1 Answers1

0

you need to decrement maxAppend in your remove listener

like so:

$( "body" ).on('click', '.remove-row', function() {
    $(this).closest('#template').remove();
    maxAppend--;
}
jdubjdub
  • 613
  • 7
  • 21