Laravel中用JavaScript删除输入行功能实现遇问题求助

问题1：仅隐藏输入框，无法同步删除数据库数据 #

要同步删除数据库数据，不能只隐藏DOM元素，需要给每条已存在的记录添加标记删除的隐藏字段，提交表单时后端根据这个标记处理删除操作；新增的临时行则可直接移除DOM。

视图层修改（Blade示例） #

<div class="education-container">
    @foreach($user->educations as $index => $edu)
        <div class="education-row">
            <input type="text" name="educations[{{$index}}][year]" value="{{$edu->year}}">
            <input type="text" name="educations[{{$index}}][school]" value="{{$edu->school}}">
            <!-- 新增隐藏字段，标记是否删除 -->
            <input type="hidden" name="educations[{{$index}}][_destroy]" value="0" class="destroy-flag">
            <input type="hidden" name="educations[{{$index}}][id]" value="{{$edu->id}}">
            <button type="button" class="delete-row">删除</button>
        </div>
    @endforeach
    <!-- 新增行按钮（可选） -->
    <button type="button" id="add-row">新增教育经历</button>
</div>

问题2：JS函数无法对应每行删除按钮 #

放弃固定ID绑定事件，改用事件委托通过类选择器绑定，点击时通过DOM遍历找到当前按钮对应的行，动态处理。

JavaScript代码示例 #

// 事件委托监听所有删除按钮点击
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-row')) {
        const row = e.target.closest('.education-row');
        // 判断是否是已存在的数据库记录（通过是否有_destroy字段判断）
        const destroyFlag = row.querySelector('.destroy-flag');
        if (destroyFlag) {
            // 标记为待删除，隐藏行
            destroyFlag.value = '1';
            row.style.display = 'none';
        } else {
            // 新增的临时行，直接移除DOM
            row.remove();
        }
    }
});

// 新增行逻辑（可选，方便测试）
document.getElementById('add-row').addEventListener('click', function() {
    const container = document.querySelector('.education-container');
    const newIndex = container.querySelectorAll('.education-row').length;
    const newRow = document.createElement('div');
    newRow.className = 'education-row';
    newRow.innerHTML = `
        <input type="text" name="educations[${newIndex}][year]" placeholder="年份">
        <input type="text" name="educations[${newIndex}][school]" placeholder="学校">
        <button type="button" class="delete-row">删除</button>
    `;
    container.appendChild(newRow);
});

后端处理（Laravel控制器） #

在更新方法中，处理提交的educations数组，删除标记为_destroy=1的记录，同时更新或新增其他记录：

public function update(Request $request, User $user)
{
    // 验证请求数据
    $request->validate([
        'educations.*.year' => 'nullable|string',
        'educations.*.school' => 'nullable|string',
    ]);

    // 处理教育经历数据
    if ($request->has('educations')) {
        foreach ($request->educations as $data) {
            // 标记删除且存在ID的记录，直接删除
            if (isset($data['_destroy']) && $data['_destroy'] == '1' && isset($data['id'])) {
                \App\Models\Education::destroy($data['id']);
            } elseif (!empty($data['year']) || !empty($data['school'])) {
                // 新增或更新关联记录
                $user->educations()->updateOrCreate(
                    ['id' => $data['id'] ?? null],
                    [
                        'year' => $data['year'],
                        'school' => $data['school'],
                    ]
                );
            }
        }
    }

    return redirect()->back()->with('success', '更新成功');
}

注意：需在User模型中定义关联关系：

public function educations()
{
    return $this->hasMany(\App\Models\Education::class);
}

内容的提问来源于stack exchange，提问作者Alya Al Siyabi