动态添加/删除HTML元素数组结构

Question

我正在使用 jQuery 和 JavaScript 来添加/删除 HTML 元素。在这种情况下，我需要删除特定的 HTML 元素。

以下是代码：

$(document).ready(function() {
  var i = 1;
  $("#plus").click(function() {
    i++;
    $('#editrow').append("+<tr id=rownum_" + i + "><td>" + i + "</td>" +
      "<td><input type='text' id='cid_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='lac_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mnc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mcc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><button type='button' id=" + i + " onClick='delrow(" + i + ")' class='btn btn-warning btn-sm'>-</button></td></tr>");
  });
});

function delrow(num) {
  var element = document.getElementById("rownum_" + num);
  element.parentNode.removeChild(element);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>CID</th>
      <th>LAC</th>
      <th>MNC</th>
      <th>MCC</th>
      <th align="right"><button id="plus" type="button" class="btn btn-primary btn-sm">+</span></button></th>
    </tr>
  </thead>
  <tbody id="editrow">
    <tr id=rownum_1>
      <td>1</td>
      <td><input type='text' id='cid_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='lac_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mnc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mcc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><button type='button' id=1 onClick='delrow(1)' class='btn btn-warning btn-sm'>-</button></td>
    </tr>
  </tbody>
</table>

使用此代码，我在索引1、2、3、4、5、6处添加元素，并删除了一些索引3、4、5的元素，这将被删除。 在添加任何元素后，它们以7、8、9开头，并显示索引1、2、6、7、8、9 现在总共有6个元素。如何管理？ 我想得到像1、2、3、4、5、6这样的索引。

- 13hola

---

值得一提的是，jQuery是用JavaScript编写的。 - user1636522

这会通知服务器元素是否已删除或其他事情？页面重新加载后会发生什么？服务器将按什么顺序呈现这个？我认为，删除后重构DOM元素是最好的方法。只需循环剩余的元素并从0或1设置ID属性。 - Sanka

Answer 1

我认为处理表格的插入和更新最好的方法是保留一个单独的函数resetRowIndex，将行号分配给每个tr，而不用担心在插入或删除时的索引。函数resetRowIndex可以在每次插入或删除后调用，以重置每条记录的索引。

$(document).ready(function() {
  resetRowIndex();

  $("#plus").click(function() {
    var i = 0;
    $('#editrow').append("+<tr id=rownum_" + i + "><td>" + i + "</td>" +
      "<td><input type='text' id='cid_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='lac_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mnc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mcc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><button type='button' id=" + i + " onClick='delrow(event)' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-remove-sign'>Remove</span></button></td></tr>");
      
      resetRowIndex();
  });
});

function delrow(event) {
  var element = $(event.target).closest("tr");
  element.remove();
  
  resetRowIndex();
}

function resetRowIndex() {
  var idx = 0;
  $("#editrow tr").each(function() {
    $(this).find("td").first().text($(this).index() + 1);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>CID</th>
      <th>LAC</th>
      <th>MNC</th>
      <th>MCC</th>
      <th align="right"><button id="plus" type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign">Add</span></button></th>
    </tr>
  </thead>
  <tbody id="editrow">
    <tr id=rownum_1>
      <td>1</td>
      <td><input type='text' id='cid_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='lac_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mnc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mcc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><button type='button' id=1 onClick='delrow(event)' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-remove-sign'>Remove</span></button></td>
    </tr>
  </tbody>
</table>

虽然这不是最优的方法，但可能是最简单的方法。如果你想使其更优化，可以编写一些逻辑来跟踪被删除的数字，并更新后续记录等。

- Nisarg Shah

---

但是先生，它不能正常工作......我测试了添加多行，并输入一些数据，然后删除该行，它无法删除....！但另一行被删除了.... - 13hola

@mak 现在我的答案片段应该可以正常工作了。我之前忽略了您在删除行时引用数字。现在，我已经更新为使用 event.target 引用单击的元素，然后您可以使用 $(event.target).closest('tr').remove() 删除相关的 tr。 - Nisarg Shah