Laravel foreach循环中删除模态框点击仅删第一条的问题解决

问题原因 #

把模态框写在@foreach循环里时，每个模态框的ID、删除表单的action参数或隐藏ID字段会重复。浏览器查找DOM元素时只会返回第一个匹配项，所以无论点击哪一行的删除按钮，实际调用的都是第一个模态框的删除逻辑，最终删除第一条数据。

解决办法 #

方案1：模态框放在循环外，动态传递ID #

将模态框提取到循环外部，点击删除按钮时用JavaScript把当前行的ID传递给模态框的表单，所有删除按钮共用一个模态框，避免ID冲突，同时减少DOM元素数量。

示例代码

{{-- 数据列表展示 --}}
<table class="table">
    @foreach($days as $day)
    <tr>
        <td>{{ $day->name }}</td>
        <td>
            {{-- 删除按钮，点击时传递当前数据ID --}}
            <button type="button" class="btn btn-danger" 
                    onclick="setDeleteTarget({{ $day->id }})"
                    data-bs-toggle="modal" data-bs-target="#deleteModal">
                删除
            </button>
        </td>
    </tr>
    @endforeach
</table>

{{-- 循环外的通用模态框 --}}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">确定要删除这条数据吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form id="deleteForm" method="POST" action="">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function setDeleteTarget(id) {
    // 动态设置表单提交地址，替换为你的实际路由
    const deleteForm = document.getElementById('deleteForm');
    deleteForm.action = `/days/${id}`;
    // 也可以用Laravel路由函数生成：deleteForm.action = "{{ route('days.destroy', ':id') }}".replace(':id', id);
}
</script>

方案2：给每个模态框生成唯一ID #

如果坚持把模态框放在循环内，需要给每个模态框、对应的删除按钮设置唯一ID，确保点击按钮时触发当前行对应的模态框。

示例代码

<table class="table">
    @foreach($days as $day)
    <tr>
        <td>{{ $day->name }}</td>
        <td>
            {{-- 绑定唯一ID的删除按钮 --}}
            <button type="button" class="btn btn-danger" 
                    data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $day->id }}">
                删除
            </button>

            {{-- 当前行的唯一模态框 --}}
            <div class="modal fade" id="deleteModal-{{ $day->id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认删除</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">确定要删除这条数据吗？</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <form method="POST" action="{{ route('days.destroy', $day->id) }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">确认删除</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    @endforeach
</table>

注意事项 #

• 方案1更推荐，性能更优，DOM结构更简洁；
• 两种方案都要确保@csrf和@method('DELETE')正确添加，符合Laravel的RESTful删除规范；
• 使用Bootstrap模态框时，需确保已正确引入Bootstrap的JS和CSS文件。

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