EJS渲染用户表正常，点击删除按钮时username返回null问题

我用EJS开发Web应用的CRUD操作界面，数据库中的用户表格渲染正常——用户名、对应角色都显示正确，每行对应一个用户，行数也和数据库里的10个账号匹配。但点击删除按钮时，获取到的username始终是null。

EJS代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../Styles/Manage.css">
        <link rel="stylesheet" href="../Styles/css/all.css">
        <link rel="icon" href="../Images/Seal.ico">
        <script src="../Scripts/Manage.js"></script>
        <title>Manage</title>
    </head>
    <body>
        <div class="Header-Container">
            <header class="Header">
                <img src="../Images/SchoolLogo.png">
                <div class="Search-Bar">
                        <form role="search" action="/search/" class="search"></form>
                    <div class="Search-Container">
                            <input type="text" class="Search-Field" id="SearchField" placeholder="Search">
                            <button type="submit" class="Search-Button" id="SubmitButton"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </form>
                        <div class="Header-Nav">
                            <nav>
                                <ul>
                                    <li id="new">New</li>
                                    <li id="articles">Articles</li>
                                    <li id="books">Books</li>
                                    <li id="about">About Us</li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                    <a href="../Teacher-Pages/Manage.html"  class="BtnAnchor"><button id="Upload" class="UploadBtn"><i class="fa-2x fa-solid fa-upload"></i></button></a>
                    <a href="" class="BtnAnchor"><button class="AccountBtn"><i class=" fa-2x fa-solid fa-user"></i></button></a>
                    <button id="Logout" class="LogoutBtn"><i class="fa-2x fa-solid fa-right-from-bracket"></i></button>
            </header>
        </div>
        <div class="User-Section">
            <div class="Table-Container">
                <h1>Users</h1>
                <table class="User-Table">
                    <tr>
                    <th>Username</th>
                    <th>Role</th>
                    <th>Actions</th>
                    </tr>
        
                    <% users.forEach(user => { %>
                        <tr>
                            <td class="Username-Field"><%= user.username %></td>
                            <td><%= user.role %></td>
                            <td>
                                <button class="DeleteBtn" data-username="<%= user.username %>" id="deleteBtn">A</button>
                            </td>
                        </tr>
                     <% }); %>

                </table>
            </div>
        </div>
        <div class="Side-Panel">

        </div>
    </body>
</html>

前端JS代码 #

document.addEventListener('DOMContentLoaded', () => {
    const deleteButtons = document.querySelectorAll('.DeleteBtn');

    deleteButtons.forEach((button) => {
        button.addEventListener('click', async (event) => {
            const username = event.target.getAttribute('data-username');
            console.log(username); //returns null
            try {
                const response = await fetch(`/api/delete-user/${username}`, {
                    method: 'DELETE',
                });

                if (response.ok) {
                    event.target.closest('tr').remove();
                } else {
                    console.error('Failed to delete user');
                }
            } catch (error) {
                console.error('Error:', error);
            }
        });
    });
});

原因与解决方案 #

核心原因 #

你用了event.target获取属性，但点击按钮时，实际触发事件的可能是按钮内部的文本节点（比如按钮上的"A"），这个文本节点没有data-username属性，所以返回null。另外，每个删除按钮都用了相同的id="deleteBtn"，违反了HTML id唯一的规范，虽然不是当前问题的直接原因，但需要修正。

修复方案 #

方案1：用event.currentTarget替代event.target

currentTarget始终指向绑定事件的元素（也就是按钮本身），不管点击的是按钮内部哪个子元素：

document.addEventListener('DOMContentLoaded', () => {
    const deleteButtons = document.querySelectorAll('.DeleteBtn');

    deleteButtons.forEach((button) => {
        button.addEventListener('click', async (event) => {
            const username = event.currentTarget.getAttribute('data-username');
            console.log(username);
            try {
                const response = await fetch(`/api/delete-user/${username}`, {
                    method: 'DELETE',
                });

                if (response.ok) {
                    event.currentTarget.closest('tr').remove();
                } else {
                    console.error('删除用户失败');
                }
            } catch (error) {
                console.error('错误:', error);
            }
        });
    });
});

方案2：直接从循环的button变量获取属性

既然已经拿到了每个按钮元素，直接从button上取属性更可靠，不用依赖事件对象：

document.addEventListener('DOMContentLoaded', () => {
    const deleteButtons = document.querySelectorAll('.DeleteBtn');

    deleteButtons.forEach((button) => {
        button.addEventListener('click', async () => {
            const username = button.getAttribute('data-username');
            console.log(username);
            try {
                const response = await fetch(`/api/delete-user/${username}`, {
                    method: 'DELETE',
                });

                if (response.ok) {
                    button.closest('tr').remove();
                } else {
                    console.error('删除用户失败');
                }
            } catch (error) {
                console.error('错误:', error);
            }
        });
    });
});

额外优化：移除重复id

修改EJS里的按钮代码，去掉重复的id="deleteBtn"：

<button class="DeleteBtn" data-username="<%= user.username %>">A</button>

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