Laravel资源控制器删除行记录异常：点击任意删除按钮均删最后一条

嘿，我一眼就看出问题所在了——你循环里的所有删除表单都用了同一个id="delete-product"！在HTML规范里，id是全局唯一标识，当你在@forelse里重复渲染这个表单时，后面的表单会覆盖前面的同名id。所以不管你点哪一行的Delete按钮，浏览器只会找到最后一个带有这个id的表单，自然就删掉了最后一条记录。

修复步骤（最简单直接的方式） #

只需要修改视图里的表单id和对应的按钮点击事件，让每个表单都有唯一的标识：

1. 给表单设置动态唯一id：把表单的id改成包含产品slug的动态值，比如delete-product-{{ $product->slug }}
2. 让按钮触发对应id的表单：修改onclick事件里的getElementById参数，匹配对应表单的id

修改后的视图代码片段（tbody部分）：

<tbody>
    @php $count=1; @endphp
    @forelse ($products as $product)
    <tr>
        <td>{{ $count }}</td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->slug }}</td>
        <td>{{ $product->updated_at }}</td>
        <td><span class="label label-success">Published</span></td>
        <td>
            <div class="btn-group">
                <a href="/products/{{ $product->slug }}" class="btn btn-default btn-xs">View</a>
                <a href="/account/edit-product-{{ $product->slug }}" class="btn btn-warning btn-xs">Edit</a>
                <a href="{{ route('products.destroy', $product->slug) }}" class="btn btn-danger btn-xs" onclick="event.preventDefault();document.getElementById('delete-product-{{ $product->slug }}').submit();">Delete</a>
                <form id="delete-product-{{ $product->slug }}" method="POST" action="{{ route('products.destroy', $product->slug) }}" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
        </td>
    </tr>
    @php $count++; @endphp
    @empty
    <tr>
        <td colspan="6">No products yet.</td>
    </tr>
    @endforelse
</tbody>

更优雅的优化方案（避免重复onclick代码） #

如果你不想在每个按钮里写重复的onclick逻辑，可以用事件委托的方式，让代码更简洁易维护：

1. 修改按钮和表单：给Delete按钮加一个统一的类名，比如delete-product-btn，并通过data属性绑定对应表单的id；表单的id还是保持动态唯一：

<a href="{{ route('products.destroy', $product->slug) }}" class="btn btn-danger btn-xs delete-product-btn" data-form-id="delete-product-{{ $product->slug }}">Delete</a>
<form id="delete-product-{{ $product->slug }}" method="POST" action="{{ route('products.destroy', $product->slug) }}" style="display: none;">
    @csrf
    @method('DELETE')
</form>

2. 添加全局JavaScript监听：在页面底部（或者你的公共JS文件里）添加这段代码：

document.addEventListener('DOMContentLoaded', function() {
    // 监听所有删除按钮的点击事件
    document.querySelectorAll('.delete-product-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            // 获取对应表单的id并提交
            const formId = this.getAttribute('data-form-id');
            document.getElementById(formId).submit();
        });
    });
});

额外确认 #

你的路由、控制器和模型设置都是正确的——模型里的getRouteKeyName()返回slug，资源路由的destroy方法也能正确通过slug进行路由模型绑定，所以只要解决了表单id重复的问题，删除功能就能正常工作啦。

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