如何为克隆的表格行实现添加与删除功能？

嘿，我来帮你搞定这个动态表格的删除问题！你的核心麻烦在于克隆行的时候，没更新删除按钮里的行号参数，而且依赖行号的方式本身就容易因为删除操作导致索引混乱。这里给你两种解决方案，优先推荐更健壮的事件委托方式：

方案一：事件委托（强烈推荐） #

这种方式完全不用依赖行号，通过DOM元素的相对关系就能定位要删除的行，代码简洁还不容易出错，后期维护也省心。

先改HTML（去掉内联onclick，更符合现代写法） #

<table class='group'>
  <tr class='group_row_0'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove'>X</a>
    </td>
  </tr>
</table>
<a href='#' class='group_add'>+ Add Row</a>

对应的JavaScript代码 #

let rowIndex = 1;

// 添加行的逻辑
function addGroupField() {
  const lastRow = rowIndex - 1;
  const rowData = $(`.group_row_${lastRow}`).clone();
  // 更新新行的class
  rowData.attr('class', `group_row_${rowIndex}`);
  $('.group').append(rowData);
  rowIndex++;
}

// 用事件委托处理删除操作
$(document).on('click', '.group_remove', function(e) {
  e.preventDefault(); // 阻止a标签默认的跳转行为
  // 找到当前按钮所在的行，直接移除
  $(this).closest('tr').remove();
  
  // （可选）如果需要保持行号连续，重新整理所有行的class和索引
  $('.group tr').each(function(index) {
    $(this).attr('class', `group_row_${index}`);
  });
  rowIndex = $('.group tr').length; // 同步更新rowIndex为当前行数
});

// 给添加按钮绑定事件（也去掉内联onclick）
$(document).on('click', '.group_add', function(e) {
  e.preventDefault();
  addGroupField();
});

方案二：修复原有的行号传递方式 #

如果你更习惯用行号传递的思路，那就在克隆行之后，手动更新删除按钮的onclick参数：

修改后的添加行函数和删除函数 #

let rowIndex = 1;

function addGroupField() {
  const lastRow = rowIndex - 1;
  const rowData = $(`.group_row_${lastRow}`).clone();
  rowData.attr('class', `group_row_${rowIndex}`);
  
  // 找到新行里的删除按钮，把onclick的参数改成当前的rowIndex
  rowData.find('.group_remove').attr('onclick', `javascript:removeGroupField(${rowIndex});`);
  
  $('.group').append(rowData);
  rowIndex++;
}

function removeGroupField(rowNum) {
  $(`.group_row_${rowNum}`).remove();
  
  // （可选）删除后重新整理所有行的行号和删除按钮参数
  $('.group tr').each(function(index) {
    $(this).attr('class', `group_row_${index}`);
    $(this).find('.group_remove').attr('onclick', `javascript:removeGroupField(${index});`);
  });
  rowIndex = $('.group tr').length;
}

为啥你之前的尝试没成功？ #

你之前想移除最后一个td再替换，但大概率是没正确定位到克隆后的删除按钮元素，或者拼接新的onclick参数时出了语法问题。上面的代码直接用find('.group_remove')精准找到按钮，然后更新参数，就能解决这个问题啦。

小提示 #

事件委托的方式真的更靠谱，因为不管你怎么增删行，它都能准确找到要操作的元素，不会因为行号混乱导致删错行。如果你的业务不需要严格的行号class，那可选的整理行号步骤可以直接省略，代码会更简洁。

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