动态添加的表格行Delete按钮失效，如何无需刷新实现删除？

核心问题 #

动态添加的行删除按钮无效，主要有两个原因：

1. 动态行未设置id属性：初始加载的行通过PHP设置了id为unique_id，但动态创建的行没有对应设置id，导致删除函数中document.getElementById(field_id)无法找到目标行。
2. deleteRow函数存在语法错误：AJAX调用未正确闭合，可能导致函数执行失败。

修复步骤 #

1. 修复deleteRow函数的语法错误 #

补全AJAX调用的闭合括号，确保函数能正常执行：

function deleteRow(field_id)
{
  if (confirm("Are you sure you want to delete that? It can't be undone."))
  {
    $.ajax({
      data:{todelete : field_id},
      type:'POST',
      url: 'background-delete.php',
      success: function (output) {
        var row = document.getElementById(field_id);
        row.parentNode.removeChild(row);
      }
    }); // 补全AJAX调用的闭合括号
  }
}

2. 给动态创建的行添加id和样式类 #

在动态生成表格行的代码中，给<tr>元素设置id（匹配newrowid2）和初始行的样式类，确保与初始行结构一致：

var tableis = document.getElementById("fields-table-append");
var last=(-1);
var Tr = tableis.insertRow(last);
// 新增：设置行的id和样式类，和PHP生成的行保持一致
Tr.id = newrowid2;
Tr.className = 'field-type-table-border';

var Td1 = Tr.insertCell(0);
Td1.innerHTML=newrecordname2;
Td1.className = 'cellStyle fields-table-row';
Tr.appendChild(Td1);

// 以下Td2-Td4代码保持不变...

3. （可选）改用事件委托优化删除逻辑 #

内联onclick虽然能工作，但事件委托更适合动态元素，且便于统一维护。可以移除所有内联onclick，用以下代码实现：

// 给表格绑定点击事件，委托处理删除操作
document.getElementById("fields-table-append").addEventListener('click', function(e) {
  // 找到点击的删除按钮（a标签）
  const deleteLink = e.target.closest('.fields-table-column-4 a');
  if (!deleteLink) return;

  // 兼容现有代码的方式，从onclick字符串中提取id
  const onclickContent = deleteLink.getAttribute('onclick');
  const field_id = onclickContent.match(/deleteRow\((\d+)\)/)[1];

  if (confirm("Are you sure you want to delete that? It can't be undone.")) {
    $.ajax({
      data:{todelete : field_id},
      type:'POST',
      url: 'background-delete.php',
      success: function (output) {
        const row = document.getElementById(field_id);
        row.parentNode.removeChild(row);
      }
    });
  }
});

使用事件委托后，需要移除初始PHP代码和动态生成代码中的onclick属性，确保逻辑统一。

验证 #

完成上述修改后，动态添加的行将拥有与初始行一致的结构和id，删除函数能正确找到并移除目标行，无需刷新页面即可正常工作。

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