Laravel动态表单：如何让第二行及后续行显示Delete按钮

云上老周

2026-8-16

解决方案

1. 修改Blade模板代码

利用Blade循环自带的$loop->first变量判断是否为第一行，第一行保留Add按钮，其余行显示Delete按钮；同时把原Add按钮的id改为class（循环会生成多个按钮，重复ID会导致JS选择器失效）：

@foreach ($form->requirements as $index => $reqs)
<tr>
    <td>
        <input type="text" name="addMoreInputFields[{{ $index }}][requirement]"
               placeholder="Enter requirements"
               value="{{ $reqs['requirement'] }}" class="form-control" />
    </td>
    <td>
        @if($loop->first)
            <button type="button" name="add" class="btn btn-outline-primary dynamic-ar">Add</button>
        @else
            <button type="button" class="btn btn-outline-danger remove-input-field">Delete</button>
        @endif
    </td>
</tr>
@endforeach

2. 调整JavaScript代码

把Add按钮的选择器从#dynamic-ar改为.dynamic-ar（适配class选择器）
初始化i为现有表格行的数量，确保新增字段的索引不会和已有的重复：

// 初始化i为现有行的数量，避免索引重复冲突
var i = $("#dynamicAddRemove tr").length;

$(".dynamic-ar").click(function() {
    $("#dynamicAddRemove").append(`<tr>
        <td>
            <input type="text" name="addMoreInputFields[${i}][requirement]" 
                   placeholder="Enter requirements" class="form-control" />
        </td>
        <td>
            <button type="button" class="btn btn-outline-danger remove-input-field">Delete</button>
        </td>
    </tr>`);
    i++;
});

$(document).on('click', '.remove-input-field', function() {
    $(this).parents('tr').remove();
});