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

我正在构建一个表单，希望捕获一名退伍军人的军事部署历史。表单将默认为一个部署。它们加起来可以是3。我要做的是，当您单击“添加部署”时，与id=“剩余”关联的编号将从2更改为1。如果第二次单击该按钮，该按钮将被禁用，并且id=“剩余”将从1更改为0。如果单击“删除”按钮，则情况正好相反。因此，如果剩余0，则单击“删除”，则剩余1，并启用“添加部署”按钮。请参阅下面处理此注释的代码。id=“counter”未被使用。如果未使用，可以将其删除

HTML

部署地点：
部署日期：
返回日期：
添加部署
2.
剩下的

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

$（'.add'）。单击（函数（）{
$（此）.before（'部署位置：部署日期：
返回日期：删除“）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parent（'div'）.remove（）；
});

您需要跟踪部署情况，这看起来像是您正在进行的工作。您可以通过选择

$（“#remaining”）.val（）

然后根据用户的单击将其递增和递减来获取该值

---

在remove函数中，增加跨度，在add函数中，减少跨度。在add函数中，有一个if条件来查看#剩余跨度的val是否为0，如果是，则禁用add按钮$（'.add）.attr（'enabled'，false）或类似的功能。在remove函数中，您可以执行相同的操作，除了检查是否已将其递增为1，然后将enabled设置为true。

尝试检查跨度的值并在两者中进行验证。单击（）类似于：

$（'.add'）。单击（函数（）{
var$remind=parseInt（$（'#剩余'）.text（）；
如果（$提醒！=0）{
$（this）.before（'Location deployed:Date deployed:Date returned:Remove'）；
$remind=$remind-1
$（'剩余'）.text（$提醒）；
}
否则{
console.log（“全部添加”）；
$（'.add'）.prop（'disabled'，true）；
}
});
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parent（'div'）.remove（）；
var$remind=parseInt（$（'#剩余'）.text（）；
$remind=$remind+1
$（'剩余'）.text（$提醒）；
如果$（'.add'）.prop（'disabled'，false）；
});

---

我不太确定您要使用哪一部分，但这应该可以做到：

var剩余=2；
函数更新维护（isAdd）{
如果（isAdd）{
剩余=剩余-1；
}
否则{
剩余=剩余+1；
}
$（'剩余'）。文本（剩余）；
如果（剩余==0）{
$（'#btn'）.prop（“禁用”，真）；
}否则{
$（'#btn'）.prop（“禁用”，false）；
}
}
$（'.add'）。单击（函数（）{
$（this）.before（'Location deployed:Date deployed:Date returned:Remove'）；
更新维护（true）；
});
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parent（'div'）.remove（）；
更新维护（false）；
});

按钮是通过脚本生成的，它不在HTML中。它最初不在代码中的原因是我不想给用户删除第一个DIV的选项。请参阅fiddle的链接，欢迎您为我更新：）对不起，我注意到不久之后，我从我的答案中删除了它。我的回答对您有意义吗？要使用的重要jquery方法是.attr（）（用于启用/禁用按钮）和.val（）（用于获取span的内容）。您还可以使用.prop（）修改enable/disable属性，具体取决于您使用的jquery版本。由于我的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();
    });

  $('.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);

  });

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