jQuery添加/删除DIV，限制添加数量

Question

我需要创建7个不同的块，但是我想使用类来编写它，这样我就不必创建很多ID。 我已经尝试过each()或children() ，但还是不明白。

我试图遵循此解决方案。

 var remaining = 8; function UpdateRemaining(isAdd) { if (isAdd) { remaining = remaining - 1; } else { remaining = remaining + 1; } $('.remaining').text(remaining); if (remaining == 0) { $('.add').hide(); } else { $('.add').show(); } } $(document).on('click', '.add', function() { $(this).before('<div class="form-group col-md-3"><input type="file" class="form-control"> <span class="remove"><br /><button type="button" class="btn btn-danger"> Remove </button> </span></div>'); UpdateRemaining(true); }); $(document).on('click', '.remove', function() { $(this).parent('div').remove(); UpdateRemaining(false); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section"> <h3>Type A</h3> <div class="form-group col-md-3"> <label for="">Title</label> <input type="text" /> </div> <button class="add"><span class="remaining">8</span></button> <hr /> </div> <div class="section"> <h3>Type B</h3> <div class="form-group col-md-3"> <label for="">Title</label> <input type="text" /> </div> <button class="add"><span class="remaining">8</span></button> <hr /> </div>