使用jQuery动态增删元素时如何维持索引序列

嘿，这个问题我之前做表单动态增删的时候也踩过坑！核心问题在于你靠全局变量x来追踪序号，但删除元素后，x的数值和实际存在的输入框数量脱节了，而且也没有同步更新现有输入框的序号，才会出现重复的情况。

解决思路其实很简单：不要依赖单一变量维护序号，每次增删操作后，重新遍历所有输入框，统一更新它们的前置序号。这样不管怎么增删，序号都会保持连续的1、2、3...顺序。

下面是修改后的完整代码，我还顺便修复了原代码里的一个小问题——你之前给新增的行和删除按钮都用了重复的id，这不符合HTML规范，我改成了class：

修改后的HTML（原结构无需调整） #

<form method="post" action="">
 <div class="row">
 <div class="col-lg-6">
 <div id="inputFormRow">
 <div class="input-group input-group-sm mb-3">
 <div class="input-group-prepend">
 <span class="input-group-text">1</span>
 </div>
 <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
 </div>
 </div>
 <div id="newRowGoesHere"></div>
 <button id="appendNewRow" type="button" class="btn btn-sm btn-success">
 <i class="fas fa-plus"></i> Add
 </button>
 </div>
 </div>
</form>

修改后的jQuery代码 #

$(document).ready(function() {
  // 定义统一的序号重排函数
  function reindexInputRows() {
    // 遍历所有带序号的span，逐个更新为连续数字
    $('.input-group-prepend .input-group-text').each(function(index) {
      // index从0开始，所以+1得到1、2、3...的序列
      $(this).text(index + 1);
    });
  }

  // 新增行按钮点击事件
  $("#appendNewRow").click(function() {
    // 生成新行HTML，将重复id改为class
    var html = '';
    html += '<div class="appendedRow">';
    html += '<div class="input-group input-group-sm mb-3">';
    html += '<div class="input-group-prepend">';
    html += '<span class="input-group-text">0</span></div>'; // 临时值，后续会重排
    html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
    html += '<div class="input-group-append">';
    html += '<button type="button" class="btn btn-danger removeRow"><i class="far fa-trash-alt"></i></button>';
    html += '</div></div></div>';
    
    $('#newRowGoesHere').append(html);
    // 新增后立即重排序号
    reindexInputRows();
  });

  // 删除行事件（用class选择器，避免id重复问题）
  $(document).on('click', '.removeRow', function() {
    $(this).closest('.appendedRow').remove();
    // 删除后立即重排序号
    reindexInputRows();
  });
});

关键改进点说明 #

• 新增reindexInputRows函数，专门负责同步所有输入框的序号，确保始终是连续的1、2、3...序列。
• 去掉了全局变量x，不再依赖单一变量追踪序号，彻底避免了变量与实际输入框数量不同步的问题。
• 将重复的id="appendedRow"和id="removeRow"改为class，符合HTML的id唯一性规范，也避免了事件绑定的潜在冲突。
• 每次增删操作完成后立刻调用重排函数，确保序号实时更新。

这样修改后，不管你怎么增删输入框，前置序号都会自动调整为连续的序列，完美解决你遇到的问题！

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