JS/jQuery点击删除按钮获取对应表格行Expense ID的问题

问题描述 #

通过API获取Expense对象列表并动态生成表格，每行的<td>中隐藏了expense.id，但点击每行的Delete按钮时，总是获取到表格第一行的ID，无法正确发起对应行的删除请求。

问题根源 #

1. 重复ID导致选择器失效：动态生成的按钮（id='deletion-btn-table-body-row'）和其父元素（id='deletion-table-body-row'）使用了重复ID。DOM中ID必须唯一，document.querySelector只会返回第一个匹配的元素，所以每次点击都只能拿到第一行的对应元素。
2. 依赖元素位置的获取方式不可靠：多次调用previousElementSibling来定位隐藏ID的方式，完全依赖表格固定结构，一旦列顺序或数量变化就会直接失效。

修复方案 #

步骤1：修正动态生成表格的代码

把重复的ID改为类名，同时可以直接将expense.id绑定到按钮的自定义data-id属性（后续获取更简便）：

function fetchExpenses(){ 
    fetchExpensesJson()
        .then ( res => 
                res.expensesList.forEach((expense) => {
                    var expenseToAdd = "<tr>"
                                            + "<td class='hidden-id'>" + expense.id +"</td>"
                                            + "<td class='table-body-row'>" + expense.amount + "</td>"
                                            + "<td class='table-body-row'>" + expense.currency + "</td>"
                                            + "<td class='table-body-row'>" + expense.shop + "</td>"
                                            + "<td class='table-body-row'>" + expense.comment + "</td>"
                                            + "<td class='table-body-row'>" + expense.documentNumber + "</td>"
                                            + "<td class='table-body-row'>" + expense.coverageFrom + "</td>"
                                            + "<td class='table-body-row'>" + expense.coverageTo + "</td>"
                                            + "<td class='table-body-row'>Edit</td>"
                                            + "<td class='table-body-row deletion-table-body-row'><button class='deletion-btn-table-body-row' data-id='" + expense.id + "'>Delete</button></td>"
                                        + "</tr>";
                    $("#expenses-table-body").append(expenseToAdd);
                })
        );
}

步骤2：修改点击事件代码（两种可选方式）

方式一：直接读取按钮的data-id属性（推荐）

$(document).on("click",".deletion-btn-table-body-row", function(event){   
    console.log("accessing deletion process");
    const expenseId = $(this).data('id'); // 原生JS写法：this.dataset.id
    console.log(expenseId);
    
    // 发起AJAX删除请求示例
    // $.ajax({
    //     url: '/expenses/' + expenseId,
    //     type: 'DELETE',
    //     success: function() {
    //         // 删除成功后移除当前行
    //         $(this).closest('tr').remove();
    //     }.bind(this)
    // });
});

方式二：通过DOM关系定位隐藏ID单元格

如果不想使用自定义属性，可以通过按钮找到所在行，再定位隐藏ID：

$(document).on("click",".deletion-btn-table-body-row", function(event){   
    console.log("accessing deletion process");
    // 找到当前按钮所在的<tr>，再查找其中的.hidden-id单元格
    const expenseId = $(this).closest('tr').find('.hidden-id').text();
    console.log(expenseId);
});

修复说明 #

• 类名支持重复使用，适合动态生成的批量元素，避免了重复ID导致的选择器错误。
• 两种获取ID的方式都不依赖固定的元素位置，表格结构调整后依然能正常工作，稳定性更强。

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