JavaScript表格删除行异常：新增学生后已删行复现的解决方法

问题根源 #

你当前的deleteRow函数只删掉了页面上的DOM行，但没修改存储学生数据的studentList数组。而renderStudentList是完全基于studentList重新渲染整个列表的——新增学生时调用这个函数，数组里没被移除的已删除学生自然会再次被渲染出来。

修复方案 #

核心就是让数据（studentList）和视图（页面表格）保持同步，删除操作既要改DOM，也要更新数组。

方案1：通过学生ID删除（更可靠，避免索引偏移）

修改deleteRow函数：

function deleteRow(r) {
  // 获取当前行对应的学生ID
  const targetRow = r.parentNode.parentNode;
  const studentId = targetRow.querySelector("td:first-child").textContent;
  
  // 从数组中过滤掉该ID的学生
  studentList = studentList.filter(student => student.id !== studentId);
  
  // 删除页面上的行
  targetRow.remove();
}

方案2：通过行索引删除（适合简单场景）

如果你的表格结构固定（只有1行表头），也可以用索引操作：

function deleteRow(r) {
  const targetRow = r.parentNode.parentNode;
  // 行索引减去表头行数（这里表头占1行），得到数组中的对应索引
  const arrayIndex = targetRow.rowIndex - 1;
  
  // 从数组中移除该元素
  studentList.splice(arrayIndex, 1);
  
  // 删除页面上的行
  targetRow.remove();
}

额外优化（可选） #

1. 你的代码里给每个删除/编辑图标加了重复的id="delete"和id="edit"，这不符合HTML规范（ID必须唯一），建议删掉这些重复ID：

// 原代码中的img标签修改为：
<img src="./icons/delete.svg" alt="delete" onclick="deleteRow(this)">
<img src="./icons/edit.svg" alt="edit" >

2. renderStudentList里用forEach替代map更合适（因为不需要返回值）：

function renderStudentList() {
  tableBody.innerHTML = "";
  studentList.forEach((student) => {
    const studentRow = `
            <tr>
                <td>${student.id}</td>
                <td>${student.name}</td>
                <td>${student.surname}</td>
                <td>${student.birthday}</td>
                <td>${student.age}</td>
                <td>${student.gender === "M" ? "Male" : "Female"}</td>
                <td>
                    <img src="./icons/delete.svg" alt="delete" onclick="deleteRow(this)">
                    <img src="./icons/edit.svg" alt="edit" >
                </td>
            </tr>
        `;
    tableBody.insertAdjacentHTML("beforeend", studentRow);
  });
}

逻辑说明 #

页面上的学生列表始终是studentList数组的“镜像”：

• 添加学生：更新数组 → 重新渲染视图（这部分你已经做对了）
• 删除学生：更新数组 → 更新视图（之前漏掉了更新数组的步骤）

只要保证数组和视图同步，就不会再出现已删除内容重复显示的问题。

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