JavaScript 实现动态 HTML 表格行删除功能
在Web前端开发中，动态操作HTML表格是常见需求，其中删除表格行的功能在后台管理系统、数据列表页面等场景中应用广泛。本文将详细介绍如何使用原生JavaScript实现动态删除HTML表格行的功能，包含基础实现、事件委托优化以及完整示例。
一、基础实现思路
实现表格行删除的核心逻辑分为三步：
获取需要删除的目标表格行元素
找到该行的父节点（即表格的<tbody>或<table>元素）
调用父节点的
removeChild方法移除目标行
通常我们会在每一行的末尾添加一个删除按钮，点击按钮时触发删除逻辑。为了避免给每个按钮单独绑定事件，我们可以采用事件委托的方式优化性能。
二、基础实现示例
首先我们创建一个包含数据和删除按钮的基础表格，然后编写对应的删除逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态删除表格行示例</title>
<style>
table {
border-collapse: collapse;
width: 60%;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #f5f5f5;
}
.delete-btn {
padding: 5px 10px;
background-color: #ff4d4f;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.delete-btn:hover {
background-color: #ff7875;
}
</style>
</head>
<body>
<table id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td><button class="delete-btn">删除</button></td>
</tr>
</tbody>
</table>
<script>
// 获取表格元素
const table = document.getElementById('dataTable');
// 给表格的tbody绑定点击事件，使用事件委托
table.querySelector('tbody').addEventListener('click', function(e) {
// 判断点击的是否是删除按钮
if (e.target.classList.contains('delete-btn')) {
// 找到按钮所在的行
const row = e.target.closest('tr');
// 找到行的父节点（tbody）
const tbody = row.parentNode;
// 移除该行
tbody.removeChild(row);
}
});
</script>
</body>
</html>三、关键代码解析
1. 事件委托的使用
我们没有给每个删除按钮单独绑定点击事件，而是给<tbody>元素绑定了一个点击事件。当点击按钮时，事件会冒泡到<tbody>，我们通过e.target判断点击的元素是否为删除按钮，这样可以避免重复绑定事件，即使后续动态新增表格行，也不需要重新绑定事件。
2. closest方法定位行元素
e.target.closest('tr')会从点击的元素开始向上查找最近的<tr>祖先元素，即使按钮嵌套在其他元素中，也能准确找到所在的表格行，比通过parentNode多次向上查找更可靠。
3. removeChild移除行
找到目标行之后，通过row.parentNode获取行的父节点（即<tbody>），然后调用removeChild(row)方法将行从DOM中移除，完成删除操作。
四、动态新增行场景下的适配
如果表格支持动态新增行，上述事件委托的方案依然适用，因为新增的行也会被<tbody>包裹，点击事件同样会冒泡到<tbody>被捕获。以下是新增行的示例代码：
// 新增表格行的函数
function addTableRow() {
const tbody = document.querySelector('#dataTable tbody');
// 创建新行
const newRow = document.createElement('tr');
// 设置行内容，包含删除按钮
newRow.innerHTML = `
<td>${tbody.children.length + 1}</td>
<td>新增用户</td>
<td>${Math.floor(Math.random() * 10 + 20)}</td>
<td><button class="delete-btn">删除</button></td>
`;
// 将新行添加到tbody中
tbody.appendChild(newRow);
}结合之前的事件委托逻辑，新增的行点击删除按钮时，同样可以正常触发删除功能，不需要额外绑定事件。
五、注意事项
如果表格没有<tbody>，浏览器会自动将<tr>包裹在<tbody>中，但建议手动添加<tbody>，避免逻辑异常。
如果要兼容非常旧的浏览器（如IE8及以下），
closest方法可能不支持，可以替换为循环向上查找父节点的逻辑：
brush:javascript;toolbar:false> // 兼容旧浏览器的查找行逻辑 function findParentRow(element) { let current = element; while (current && current.tagName !== 'TR') { current = current.parentNode; } return current; } // 使用时替换 const row = e.target.closest('tr'); 为 const row = findParentRow(e.target);
通过以上方法，我们可以高效、稳定地实现JavaScript动态删除HTML表格行的功能，适配各种常见的表格操作场景。