动态行编号不使用jquery刷新

Question

我正在使用此线程中的脚本。问题是当我删除一行时，数字不会相应地自动重新排序。

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" id="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).find("input.reqrow").html('<input type="text" name="requisitionNo[]" value="' + (index + 1) + '" class="form-control" readonly>')
    console.log(index);
  });
  i--;
});

<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" 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>

Answer 1

1. ID 必须是唯一的
2. 克隆行
3. 更改值而不是 HTML

const $container = $('#dynamic_field');
const $row = $('.row',$container);
const renum = () => $container.find('[name^=requisitionNo]').each(function(i, ele) {$(ele).val(i+1)});

$('#addRow').click(function() {
  const $newRow = $row.clone(true);
  $newRow.find(':input').each(function() {
    this.value = '';
  });
  $newRow.appendTo($container);
  $newRow.find('.delRow').removeAttr('hidden');
  renum();
});
$(document).on('click', '.delRow', function() {
  $(this).closest(".row").remove();
  renum();
});

<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" 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" hidden><i class="fas fa-trash-alt"></i></button></div>
    </div>
  </div>
</div>