如何使用JavaScript实现点击按钮删除表格行？

要实现点击按钮删除对应表格行的功能，我们可以结合DOM选择器、事件绑定和元素移除方法来完成，以下是完整实现方案：

完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Table Row Delete Demo</title>
</head>
<body>
    <input type="text" id="inp" placeholder="Nom">
    <input type="text" id="inp2" placeholder="Prénom">
    <button id="btn">Add</button><br><br>
    <table border="1">
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Supprimer</th>
            </tr>
    </table>
    <script src="sc.js"></script>
</body>
</html>

CSS

table{
    border-collapse: collapse;
}
.supp{
    border: none;
    cursor: pointer;
    background-color: #ff4444;
    color: white;
    padding: 4px 8px;
}

JavaScript（补全删除逻辑）

const table = document.querySelector("table")
const inp = document.querySelector("#inp")
const inp2 = document.querySelector("#inp2")
const addBtn = document.querySelector("#btn")

function addTableRow() {
    // 验证输入不为空
    const nom = inp.value.trim();
    const prenom = inp2.value.trim();
    if (!nom || !prenom) return;

    // 拼接新行HTML
    const rowTemplate = `<tr>
        <td>${nom}</td>
        <td>${prenom}</td>
        <td><button class="supp">Supprimer</button></td>
    </tr>`;
    table.innerHTML += rowTemplate;

    // 绑定删除事件
    bindDeleteEvents();

    // 清空输入框
    inp.value = "";
    inp2.value = "";
}

function bindDeleteEvents() {
    const deleteButtons = document.querySelectorAll(".supp");
    deleteButtons.forEach(btn => {
        // 先移除已有事件，避免重复绑定
        btn.removeEventListener("click", handleDeleteRow);
        btn.addEventListener("click", handleDeleteRow);
    });
}

function handleDeleteRow() {
    // 找到当前按钮所在的表格行并删除
    this.closest("tr").remove();
}

addBtn.addEventListener("click", addTableRow);

核心逻辑说明 #

1. 添加行：点击Add按钮时，先验证输入内容，再通过模板字符串生成新的表格行，插入到表格中。
2. 删除行：点击删除按钮时，通过closest("tr")方法向上查找最近的表格行元素，调用remove()方法将其从DOM中移除。
3. 优化建议：上面的代码每次添加行都会重新绑定所有删除按钮的事件，存在重复绑定的问题。更高效的方式是使用事件委托，只给表格绑定一次事件即可：

// 替换bindDeleteEvents函数，页面加载时执行一次
table.addEventListener("click", function(e) {
    if (e.target.classList.contains("supp")) {
        e.target.closest("tr").remove();
    }
});

事件委托利用事件冒泡机制，表格作为父元素捕获子元素的点击事件，无需每次新增行都重新绑定事件，性能更优。

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