使用JQuery实现动态行编号删除后不自动刷新排序问题

你当前的代码在删除行后无法自动重新排序编号，主要有三个问题：

1. 初始行的编号输入框没加reqrow类，导致重新排序时不会遍历到它
2. 删除按钮用了重复的id="delRow"，HTML中id不能重复，会导致点击事件只对第一个按钮生效
3. 删除逻辑里更新编号的代码错误——你在已经选中的input.reqrow元素里又去查找input.reqrow，找不到目标元素，而且没必要重新生成input标签，直接修改value值即可

以下是修正后的完整代码：

修正后的JavaScript代码 #

var i = 1;
$('#addRow').click(function() {
  i++;
  $('#dynamic_field').append('<div class="row">' +
    '<div class="col-lg-1"><div class="form-group" id="row_num' + i + '"><input type="text" name="requisitionNo[]" class="form-control reqrow" value="' + i + '" readonly></div></div>' +
    '<div class="col-lg-7"><div class="form-group"><input type="text" name="requisitionDetails[]" class="form-control"></div></div>' +
    '<div class="col-lg-1"><div class="form-group"><input type="text" name="itemPrice[]" class="form-control"></div></div>' +
    '<div class="col-lg-1"><div class="form-group"><input type="text" name="itemQuantity[]" class="form-control"></div></div>' +
    '<div class="col-lg-1"><div class="form-group"><input type="text" name="itemTotal[]" class="form-control"></div></div>' +
    '<div class="col-lg-1"><div class="form-group"><button type="button" class="delRow"><i class="fas fa-trash-alt"></i></button></div></div>' +
    '</div>');
});
$(document).on('click', '.delRow', function() {
  $(this).closest(".row").remove();
  // 遍历所有编号输入框，重新设置序号
  $('input.reqrow').each(function(index) {
    $(this).val(index + 1);
  });
  i--;
});

修正后的HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button type="button" id="addRow">Add</button>
<div id="dynamic_field">
  <div class="row">
    <div class="col-lg-1">
      <div class="form-group"><input type="text" name="requisitionNo[]" value='1' class="form-control reqrow" readonly></div>
    </div>
    <div class="col-lg-7">
      <div class="form-group"><input type="text" name="requisitionDetails[]" class="form-control"></div>
    </div>
    <div class="col-lg-1">
      <div class="form-group"><input type="text" name="itemPrice[]" class="form-control"></div>
    </div>
    <div class="col-lg-1">
      <div class="form-group"><input type="text" name="itemQuantity[]" class="form-control"></div>
    </div>
    <div class="col-lg-1">
      <div class="form-group"><input type="text" name="itemTotal[]" class="form-control"></div>
    </div>
    <div class="col-lg-1">
      <div class="form-group"></div>
    </div>
  </div>
</div>

关键改动说明 #

• 给初始行的编号输入框添加reqrow类，确保重新排序时能遍历到它
• 将删除按钮的id="delRow"改为class="delRow"，避免重复id导致的事件绑定失效问题
• 删除逻辑里直接通过.val()修改输入框的value值，替代错误的.find()和.html()重新生成元素的写法
• 遍历所有reqrow输入框，按索引+1重新设置编号，实现自动排序

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