如何让jQuery循环变量从2开始且保留字段删除功能？

直接修改代码即可实现起始编号从2开始，同时保留完整的新增/删除功能：

修改后的JavaScript代码 #

$(document).ready(function() {
  var i = 2; // 初始编号从2开始
  $('#add').click(function() {
    // 从2到8共7个字段，和原逻辑的数量限制一致
    if (i <= 8) {
      // 修复label标签的语法错误（移除多余引号）
      $('#dynamic_field').append('<div class="add-row" id="row' + i + '"><label for="number_' + i + '">Number ' + i + '</label><input type="text" name="number_' + i + '" value=""></div>')
      i++;
      $('.btn-remove').removeClass('hidden');
    }
  });
  $(document).on('click', '.btn-remove', function() {
    // 移除最后一个新增的字段行，逻辑更准确
    $('#dynamic_field').children('.add-row').last().remove();
    i--;
    // 根据剩余字段数量判断是否隐藏删除按钮
    if ($('#dynamic_field .add-row').length === 0) {
      $('.btn-remove').addClass('hidden');
    }
  });
});

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button>   
<button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

关键调整说明 #

• 起始编号设置：将初始变量i设为2，确保第一次点击添加时生成编号为2的字段，后续递增保持连续编号。
• 删除逻辑修正：原代码通过行数量匹配id的逻辑存在bug（编号从2开始时，行id和字段数量不对应），改为直接移除最后一个动态行，确保删除的是最新添加的字段。
• 按钮显示判断：改为根据当前实际存在的动态字段数量控制删除按钮的显示/隐藏，比依赖i的值更准确，避免逻辑冲突。
• 语法修复：修正了label标签中多余的引号，避免HTML语法错误。

内容的提问来源于stack exchange，提问作者Bill