SweetAlert确认删除表格行时仅删除最后一行问题排查

核心问题出在事件绑定的作用域共享上：当你通过循环为删除按钮绑定SweetAlert事件时，如果使用了var声明变量（或未正确捕获当前行上下文），所有事件处理函数会共享同一个变量引用，最终指向循环的最后一个元素。这就导致无论点击哪一行的删除按钮，确认后都会提交最后一行的表单。

1. 修正JavaScript事件绑定逻辑 #

改用let（块级作用域）或forEach循环，确保每个事件处理函数绑定当前行的表单元素：

方案一：使用let和this捕获当前上下文

// 获取所有删除按钮
const deleteBtns = document.querySelectorAll('.delete-btn');

for (let i = 0; i < deleteBtns.length; i++) {
    const btn = deleteBtns[i];
    btn.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认表单提交
        // 获取当前按钮所属的表单
        const currentForm = this.closest('form');
        
        Swal.fire({
            title: '确认删除？',
            showCancelButton: true,
            confirmButtonText: '删除'
        }).then((result) => {
            if (result.isConfirmed) {
                // 提交当前行的表单
                currentForm.submit();
            }
        });
    });
}

方案二：使用forEach循环简化绑定

document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        const currentForm = this.closest('form');
        
        Swal.fire({
            title: '确认删除？',
            showCancelButton: true,
            confirmButtonText: '删除'
        }).then((result) => {
            result.isConfirmed && currentForm.submit();
        });
    });
});

2. 确保HTML结构正确 #

每行的删除表单必须独立，且包含当前行的唯一标识（比如数据ID）：

<table>
    {% for item in data %} <!-- 对应你Python后端的循环渲染逻辑 -->
    <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
            <!-- 每行独立的删除表单 -->
            <form action="/delete" method="POST" class="delete-form">
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <button type="submit" class="delete-btn">删除</button>
            </form>
        </td>
    </tr>
    {% endfor %}
</table>

3. 后端验证（以Flask为例） #

确保后端正确接收并使用提交的item_id执行删除：

from flask import Flask, request, redirect

app = Flask(__name__)

@app.route('/delete', methods=['POST'])
def delete_item():
    item_id = request.form.get('item_id')
    # 执行数据库删除操作（示例）
    # db.execute("DELETE FROM your_table WHERE id = ?", (item_id,))
    # db.commit()
    return redirect('/')

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