添加 5 行后删除添加更多按钮，并在小于 5 javascript/jQuery 时再次显示

Question

我正在使用“添加更多”按钮将 div“模板”的内容克隆到 div“占位符”中。

我希望一旦添加 5 行，添加按钮就会消失，一旦我删除 5 行中的一个以再次显示并能够再次添加行，直到它们丰富 5。

目前，由于 if 语句，一旦我删除行，添加按钮不会添加任何内容，因为它有条件执行 5 次。

请帮忙。

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

Answer 1

你需要在你的移除监听器中减少maxAppend

像这样：

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