为表格动态生成行添加删除按钮并同步更新总计

问题根源 #

你写的代码失效主要有两个原因：

1. 重复ID问题：所有删除按钮都用了delete-row这个ID，但DOM中ID必须唯一，getElementById只能找到第一个按钮，新增行的按钮根本不会被绑定事件。
2. 动态元素事件绑定方式错误：直接给还未生成的动态元素绑定事件，代码执行时这些元素不存在，监听自然不会生效。

修复方案 #

1. 修改删除按钮的标识

把删除按钮的id="delete-row"改成class="delete-row"，避免ID重复问题。新增行的HTML模板里也要对应修改：

<!-- 新增行的删除按钮模板 -->
<button type="button" class="delete-row">删除</button>

2. 使用事件委托绑定监听

把事件监听绑定到静态存在的父元素（比如表格的<tbody>），利用事件冒泡机制捕获动态元素的点击事件：

// 替换你原来的事件监听代码
$('tbody').on('click', '.delete-row', function() {
  const tableRow = $(this).closest('tr');
  // 读取当前行的小计，处理空值或非数字情况
  const rowTotal = parseFloat(tableRow.find('[name="total"]').val()) || 0;
  // 读取总计，同样做容错处理
  const currentTotal = parseFloat($('#totalOfTotals').text()) || 0;
  // 更新总计
  $('#totalOfTotals').text(currentTotal - rowTotal);
  // 删除行
  tableRow.remove();
  // 维护行计数变量
  row--;
});

3. 确保首行无删除按钮

初始化的表格首行不要添加删除按钮，只在动态新增行时插入删除按钮，满足需求里“默认首行不显示”的要求。

额外优化建议 #

• 对数值计算做容错处理（比如parseFloat(...) || 0），避免因空值或非数字导致NaN错误。
• 如果row变量是用来控制行号的，删除行后要确保后续新增行的行号不会混乱。

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