jQuery 添加/删除 DIV 计数、跟踪和限制添加/删除的数量答案

【问题标题】：jQuery Add/Remove DIVs count, track and limit the number added/removedjQuery 添加/删除 DIV 计数、跟踪和限制添加/删除的数量
【发布时间】：2021-08-16 14:04:12
【问题描述】：

我正在构建一个表格，用于记录退伍军人的军事部署历史。该表单将默认为一个部署。它们最多可以加 3。我想要做的是，当您单击“添加部署”时，与 id="remaining" 关联的数字从 2 变为 1。如果您再次单击该按钮，则该按钮将被禁用并且 id ="remaining" 从 1 更改为 0。如果您单击删除按钮，则会发生相反的情况，因此如果您剩余 0 并且单击删除，它会更改为剩余 1 并且启用添加部署按钮。请参阅下面处理此 JS FIDDLE 的代码注意 id="counter" 未使用，如果未使用，可以将其删除。

HTML

<div>
Location deployed:
<input type="text" size="15" placeholder="Location deployed">&nbsp;Date deployed:
<input type="text" size="15" placeholder="Date deployed">&nbsp;Date returned:
<input type="text" size="15" placeholder="Date returned">
</div>
<div id="counter">
<button class="add" type="button">Add Deployment</button> 
<span id="remaining">2</span>
remaining
</div>

JQUERY

    $('.add').click(function() {
    $(this).before('<div>Location deployed: <input type="text" placeholder="Location  
    deployed" size="15" > Date deployed: <input type="text" placeholder="Date deployed" 
    size="15">
    Date returned: <input type="text" placeholder="Date returned" size="15" >&nbsp;<span
   class="remove"><button type="button"> Remove </button> </span></div>');
    });

    $(document).on('click','.remove',function() {
    $(this).parent('div').remove();
    });

【问题讨论】：

该按钮是通过脚本生成的，它不在 HTML 中。它最初不在代码中的原因是我不想让用户选择删除第一个 DIV。请参阅小提琴的链接，欢迎您为我更新它:)
对不起，我注意到不久之后，所以我从我的答案中删除了它。我的回答对你有意义吗？
要使用的重要 jquery 方法是 .attr()（启用/禁用按钮）和 .val()（获取 span 的内容）。您还可以使用 .prop() 修改启用/禁用属性，具体取决于您使用的 jquery 版本

标签： jquery html

【解决方案1】：

我不太确定您遇到了什么问题，但应该这样做：

http://jsfiddle.net/mmilleruva/9C6Lw/

var remaining = 2;

function UpdateRemaining(isAdd){
if(isAdd){
    remaining = remaining - 1;
}
else{
    remaining = remaining + 1;
}

$('#remaining').text(remaining);
if(remaining == 0){
    $('#btn').prop("disabled",true);
} else{
       $('#btn').prop("disabled",false);
 }
}

$('.add').click(function () {
  $(this).before('<div>Location deployed: <input type="text" placeholder="Location deployed" size="15" > Date deployed: <input type="text" placeholder="Date deployed" size="15" > Date returned: <input type="text" placeholder="Date returned" size="15" >&nbsp;<span class="remove"><button type="button"> Remove </button> </span></div>');

UpdateRemaining(true);
});

 $(document).on('click', '.remove', function () {
  $(this).parent('div').remove();
   UpdateRemaining(false);      
});

【讨论】：

非常感谢您的帮助，因为我的 jQuery 能力有限。

【解决方案2】：

尝试检查跨度的值并在两个 .click() 中进行验证，例如：

  $('.add').click(function () {
      var $remind = parseInt($('#remaining').text());
      if($remind != 0){
      $(this).before('<div>Location deployed: <input type="text" placeholder="Location deployed" size="15" > Date deployed: <input type="text" placeholder="Date deployed" size="15" > Date returned: <input type="text" placeholder="Date returned" size="15" >&nbsp;<span class="remove"><button type="button"> Remove </button> </span></div>');
          $remind = $remind - 1
          $('#remaining').text($remind);

      }
      else{
      console.log('All added');
          $('.add').prop('disabled', true);
      }
  });

  $(document).on('click', '.remove', function () {
      $(this).parent('div').remove();
      var $remind = parseInt($('#remaining').text());
      $remind = $remind + 1
      $('#remaining').text($remind);
      if$('.add').prop('disabled', false);

  });

Live Demo

【讨论】：

【解决方案3】：

您需要跟踪部署，这似乎是您在跨度中所做的。您可以通过选择$("#remaining").val() 来获取它，然后根据用户点击对其进行递增和递减。

在您的删除功能中，您增加跨度，在您的添加功能中，您减少所说的跨度。在您的添加函数中，您有一个 if 条件来查看 #remaining 跨度的 val 是否为 0，如果是，则禁用添加按钮 $('.add).attr('enabled', false) 或类似的东西。在您的删除函数中，您执行相同的操作，只是检查它是否已递增到 1，然后将启用设置为 true。

【讨论】：