javascript - Jquery添加更多和删除冲突并显示错误值

Question

Jquery添加更多和删除冲突并显示错误的值当我添加更多行时，工作正常，如 1-2-3-4但是当我删除一行时它会再次添加 1-2-3-3当我删除两行时，它显示 1-4-3-4

我希望它能正常工作，我也尝试了一些方法，但没有运气

$(function() {
  var scntDiv = $('#pmore');
  var i = $('#pmore tr').size() + 1;
  $('.addmore').on('click', function() {
    $('<tr><td align="center">' + i + '</td><td><input type="text" data-type="productName" name="itemName[]" id="itemName_' + i + '" class="form-control autocomplete_txt" ></td><td><input type="number" name="price[]" id="price_' + i + '" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="quantity[]" id="quantity_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="total[]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" readonly></td><td><button class="btn btn-danger" id="dlt" type="button">- Delete</button></td><td></td></tr>').appendTo(scntDiv);
    i++;

    return false;
  });

  $(document).on('click', '#dlt', function() {
    if (i > 2) {
      $(this).parents('tr').remove();
      i--;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" class="table table-striped table-bordered dataTable">
  <thead>

    <tr>
      <th width="5%">S no</th>
      <th width="35%">Part Name</th>
      <th width="10%">Price</th>
      <th width="10%">Quantity</th>
      <th width="10%">Total</th>
      <th width="30%" colspan="2">Action</th>
    </tr>
  </thead>
  <tbody id="pmore">
    <tr>
      <td align="center">1</td>
      <td>
        <input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" required>
      </td>
      <td>
        <input type="number" name="price[]" id="price_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
      </td>
      <td>
        <input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
      </td>
      <td>
        <input type="number" name="[total]" id="total_1" class="form-control totalLinePrice" readonly>
      </td>
      <td align="center">
        <button class="btn btn-success addmore" type="button">+ Add More</button>
      </td>
      <td align="center">
        <button class="btn btn-danger dlt" type="button">- Delete</button>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

当你删除一个item时，需要确保后面的item索引减少1

$(function() {
  var scntDiv = $('#pmore');
  var i = $('#pmore tr').size() + 1;
  $('.addmore').on('click', function() {
    $('<tr><td align="center">' + i + '</td><td><input type="text" data-type="productName" name="itemName[]" id="itemName_' + i + '" class="form-control autocomplete_txt" ></td><td><input type="number" name="price[]" id="price_' + i + '" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="quantity[]" id="quantity_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td><td><input type="number" name="total[]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" readonly></td><td><button class="btn btn-danger" id="dlt" type="button">- Delete</button></td><td></td></tr>').appendTo(scntDiv);
    i++;

    return false;
  });

  $(document).on('click', '#dlt', function() {
    if (i > 2) {
      var $tr = $(this).closest('tr');
      $tr.nextAll().find('td:first-child').text(function(i, text) {
        return --text;
      });
      $tr.remove();
      i--;
    }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" class="table table-striped table-bordered dataTable">
  <thead>

    <tr>
      <th width="5%">S no</th>
      <th width="35%">Part Name</th>
      <th width="10%">Price</th>
      <th width="10%">Quantity</th>
      <th width="10%">Total</th>
      <th width="30%" colspan="2">Action</th>
    </tr>
  </thead>
  <tbody id="pmore">
    <tr>
      <td align="center">1</td>
      <td>
        <input type="text" data-type="productName" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" required>
      </td>
      <td>
        <input type="number" name="price[]" id="price_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
      </td>
      <td>
        <input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
      </td>
      <td>
        <input type="number" name="[total]" id="total_1" class="form-control totalLinePrice" readonly>
      </td>
      <td align="center">
        <button class="btn btn-success addmore" type="button">+ Add More</button>
      </td>
      <td align="center">
        <button class="btn btn-danger dlt" type="button">- Delete</button>
      </td>
    </tr>

  </tbody>
</table>