如何在Laravel的foreach循环中实现SweetAlert删除确认功能？

问题根源 #

1. 重复ID冲突：循环生成的所有删除按钮使用了同一个id="delete-confirm"，但HTML规定id必须唯一，document.getElementById只会返回页面中第一个匹配的元素，导致仅第一行按钮能绑定事件。
2. 表单对象未正确获取：原JS代码中的form变量未定义，即便事件绑定成功，也无法提交对应行的表单。

修复步骤 #

1. 修改Blade模板代码

将按钮的id替换为class，避免标识重复：

<tbody>
@foreach ($users as $user)                                        
    <tr>
        <td>{{ $user->name }}</td>
        <td>{{ $user->email }}</td>
        <td>
            <div class="menu-item px-3">
                <form action="{{ route('user.delete', $user->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <!-- 将id改为class -->
                    <button type="submit" class="delete-confirm">删除</button>
                </form>
            </div>
        </td>
    </tr>
@endforeach
</tbody>

2. 更新JavaScript代码

用类选择器获取所有删除按钮，逐个绑定事件，并精准获取当前按钮对应的表单：

// 获取所有带delete-confirm类的按钮
const deleteButtons = document.querySelectorAll('.delete-confirm');

deleteButtons.forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        // 定位当前按钮所属的表单
        const targetForm = this.closest('form');

        Swal.fire({
            html: `你确定要删除该用户吗？`,
            icon: "info",
            buttonsStyling: false,
            showCancelButton: true,
            confirmButtonText: "删除",
            cancelButtonText: '取消',
            customClass: {
                confirmButton: "btn btn-danger",
                cancelButton: 'btn btn-primary'
            }
        }).then(result => {
            // 判断用户是否确认删除
            if (result.isConfirmed) {
                targetForm.submit();
            }
        });
    });
});

关键说明 #

• 使用document.querySelectorAll('.delete-confirm')可获取所有匹配按钮，规避id唯一性限制。
• 通过this.closest('form')精准定位当前按钮对应的表单，确保提交对应行的删除请求。
• SweetAlert回调返回结果为对象，需用isConfirmed属性判断用户操作（直接判断结果对象会导致取消操作也触发提交）。

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