如何使用JavaScript实现单个删除按钮逐行删除HTML表格行

1. 调整HTML表格结构（form.html修改） #

首先给表格新增操作列，用来放置每行的删除按钮，修改table的表头部分：

<table class="table border" id="table">
  <tr>
    <th>Name</th>
    <th>Gender</th>
    <th>Age</th>
    <th>Language</th>
    <th>State</th>
    <th>Description</th>
    <th>操作</th>
  </tr>
</table>

2. 修改form.js逻辑 #

需要调整两处：一是插入新行时新增操作列和删除按钮；二是实现删除行的逻辑，同时修正原代码末尾form.reset()的报错问题。
修改后的完整form.js代码如下：

(function setup() {
  "use strict";

  var myForm = document.getElementById("myForm");
  var NameElem = document.getElementById("name");
  var genderElem = document.getElementsByName("gender");
  var ageElem = document.getElementById("age");
  var languageElem = document.getElementsByName("language");
  var stateElem = document.getElementById("state");
  var descriptionElem = document.getElementById("description");
  var tableElem = document.getElementById("table");
  var selectedGender = '';
  var selectedLanguages = [];
   
  document.getElementById("display").addEventListener("click", function() {
    for(var i = 0; i < genderElem.length; i++) {
        if(genderElem[i].checked)
          selectedGender = genderElem[i].value;
     }
     
     for(var i = 0; i < languageElem.length; i++) {
        if(languageElem[i].checked)
          selectedLanguages.push(languageElem[i].value);
     }
    var newRow = tableElem.insertRow(-1);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode(NameElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(1);
    newText = document.createTextNode(selectedGender);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(2);
    newText = document.createTextNode(ageElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(3);
    newText = document.createTextNode(selectedLanguages.toString());
    newCell.appendChild(newText);
    newCell = newRow.insertCell(4);
    newText = document.createTextNode(stateElem.value);
    newCell.appendChild(newText);
    newCell = newRow.insertCell(5);
    newText = document.createTextNode(descriptionElem.value);
    newCell.appendChild(newText);
    // 插入操作列和删除按钮
    newCell = newRow.insertCell(6);
    var delBtn = document.createElement('button');
    delBtn.className = 'btn btn-sm btn-danger';
    delBtn.innerText = '删除';
    // 绑定删除当前行的事件
    delBtn.onclick = function() {
      this.parentElement.parentElement.remove();
    }
    newCell.appendChild(delBtn);
    
    // 重置表单
    myForm.reset();
    selectedGender = "";
    selectedLanguages = [];
  });

  // 保留原有顶部Delete按钮功能，点击逐行删除最后一条数据
  window.DeleteRows = function() {
    if(tableElem.rows.length > 1) {
      tableElem.deleteRow(tableElem.rows.length - 1);
    }
  }
})();

实现说明 #

• 每行独立删除：每条数据后都会生成专属删除按钮，点击后直接删除对应行，不会影响其他数据
• 全局逐行删除：原有顶部Delete按钮功能保留，点击后每次删除表格最后一条录入的数据
• 修复了原代码中全局form.reset()报错的问题，将重置逻辑移到闭包内绑定到表单元素上

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