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

我希望你正在尋找類似這樣的它會工作正常。你可以添加三個元素

一旦達到它的限制添加按鈕將消失，如果您刪除任何一個元素添加

按鈕將再次出現。您可以添加 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>