移除列表项后如何重新为div、span及input控件编号？

针对需求——移除列表项前校验数量需多于1，移除后重新为div、input、span控件从1开始编号，以下是修正并完善后的实现方案：

先修正HTML中的错误 #

原HTML存在两处问题：

• 重复定义了id="inputDataGrippanel"的div，ID必须唯一
• newrowItem_4中的span标签未正确闭合

修正后的HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
  <label>Rows</label>
  <div class="form-group" id="newrowItem_1">
    <div class="input-group">
      <input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
      <span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(1)">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
      </span>
    </div>
  </div>
  <div class="form-group" id="newrowItem_2">
    <div class="input-group">
      <input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
      <span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(2)">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
      </span>
    </div>
  </div>
  <div class="form-group" id="newrowItem_3">
    <div class="input-group">
      <input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
      <span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(3)">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
      </span>
    </div>
  </div>
  <div class="form-group" id="newrowItem_4">
    <div class="input-group">
      <input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
      <span id="spanrowItem_4" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(4)">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
      </span>
    </div>
  </div>
  <div class="form-group" id="newrowItem_5">
    <div class="input-group">
      <input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
      <span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(5)">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
      </span>
    </div>
  </div>
</div>

完善后的JavaScript逻辑 #

原代码中重新编号的部分被注释，现在补充完整，确保移除后所有元素的ID、占位符和点击事件参数都同步更新：

function RemoveRow(id) {
  if (id > 0) {
    let rowCount = $('[id^=newrowItem_]').length;
    // 先移除所有项的错误样式
    $('.fieldrowItem').removeClass('error');
    
    if (rowCount > 1) {
      $(`#newrowItem_${id}`).remove();
      // 重新编号剩余项
      $('#inputDataGrippanel .form-group').each((index, item) => {
        const newId = index + 1;
        // 更新外层div的ID
        $(item).attr('id', `newrowItem_${newId}`);
        // 更新input的ID和placeholder
        const input = $(item).find('.fieldrowItem');
        input.attr('id', `fieldrowItem_${newId}`);
        input.attr('placeholder', `Row ${newId}`);
        // 更新span的ID和onclick参数
        const span = $(item).find('.input-group-addon');
        span.attr('id', `spanrowItem_${newId}`);
        span.attr('onclick', `RemoveRow(${newId})`);
      });
    } else {
      // 只剩一项时添加错误提示
      $(`#fieldrowItem_${id}`).addClass('error');
    }
  }
}

关键实现说明 #

• 数量校验：移除前判断当前列表项数量是否大于1，确保至少保留一项
• 批量更新：通过each遍历剩余所有列表项，统一从1开始重新分配编号
• 同步更新：不仅修改元素ID，同时更新input的placeholder和span的点击事件参数，保证交互逻辑一致
• 错误状态管理：移除错误样式的逻辑放在开头，避免残留之前的错误标记

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