jQuery: как скрыть кнопку (добавить больше) после добавления элемента 3 и показать кнопку, если удалить один элемент из элемента 3

Question

jQuery: Как скрыть кнопку (добавить еще) после добавления 3 элемента и показать кнопку, если удалить один элемент из 3 элемента?

 $('.addMoreElement').each(function () {
  $(this).on('click', function() {
    $(".appendedBefore").before(`
    <div class="row position-relative thisLength">
      <div class="col-md-4">
        <div class="form-group">
          <label for="">Departing</label>
          <div class="input-group">
            <i class="fa fa-calendar-alt"></i>
            <input type='text' class='select-date form-control' placeholder="Select Date" />
          </div>
        </div>
      </div>
      <span class="removethis"><i class="fa fa-times"></i></span>
    </div>
    `);

      $('.form-group').find(".select-date").datepicker();
      $('.form-group').find('.selectpicker').selectpicker('refresh');

    if ($(".thisLength").length >= 1) {
      alert('NMoklidsjfkolsdmf')
      $('.addMoreElement').hide();
    }
  });                                                  
});

Answer 1

Я надеюсь, что вы ищете подобное, оно будет работать нормально. Вы можете добавить три элемента

По достижении этого, кнопка добавления лимита исчезнет, ​​а если вы удалите какой-либо один элемент, добавьте

* 1004. Кнопка * появится снова. Вместо поля ввода вы можете добавить свой html контент.

    var maxField  = 3; 
    var addButton = $('.add_button'); 
    var wrapper   = $('.field_wrapper'); 
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button">Remove</a></div>';
    var x = 0; 
    
    $(addButton).click(function(){
      if(x < maxField){ 
        x++; 
        if(x<=3)
          $(wrapper).append(fieldHTML); 
        if(x==3)
          $('.add_button').hide();
      }
    });
    
    $(wrapper).on('click', '.remove_button', function(e){
      e.preventDefault();
      $(this).parent('div').remove(); 
      x--; 
      if(x<3)
        $('.add_button').show();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="field_wrapper">
    <div>
        <!--<input type="text" name="field_name[]" value=""/>-->
        <a href="javascript:void(0);" class="add_button" title="Add field">Add Item</a>
    </div>
</div>