Yii2动态表单中实现移除按钮调用JavaScript函数

要实现点击remove-item按钮时触发自定义JS函数，这里有两种实用方案，结合你的场景给你详细说明：

方案一：通过DynamicForm插件配置实现（推荐） #

Yii2 Dynamic Form本身提供了回调钩子，你可以在初始化插件时直接指定移除相关的事件逻辑，这样能和插件的默认行为更好地结合：

1. 初始化DynamicForm时添加回调 #

假设你的动态表单初始化代码是这样的，添加afterRemove回调或者直接给移除按钮绑定点击事件：

$('#dynamic-form').dynamicForm({
    // 保留你原来的其他配置项
    addButton: {
        selector: '.add-item',
        // ...你的添加按钮配置
    },
    removeButton: {
        selector: '.remove-item',
        // 点击按钮时先执行自定义逻辑，再触发默认移除
        onClick: function(e) {
            // 获取当前要移除的表单行
            const $targetItem = $(this).closest('.dynamicform_item');
            // 调用你的自定义函数
            handleItemRemove($targetItem);
            // 执行插件默认的移除操作
            $(this).dynamicForm('remove');
            e.preventDefault();
        }
    },
    // 可选：如果想在元素移除完成后执行逻辑，用afterRemove回调
    afterRemove: function($removedItem) {
        console.log('元素已移除，可在这里做后续处理');
    }
});

2. 编写你的自定义处理函数 #

在页面的<script>标签里定义你的业务逻辑函数，比如获取被移除行的产品信息：

function handleItemRemove($item) {
    // 从你用Select2渲染的字段中获取选中的产品名称
    const removedProductName = $item.find('[name$="[productname]"]').val();
    if (removedProductName) {
        console.log(`即将移除产品：${removedProductName}`);
        // 这里可以添加你的业务逻辑，比如发送AJAX请求记录移除操作、更新统计数据等
    }
}

方案二：直接给按钮绑定事件（灵活适配） #

如果不想修改插件初始化配置，也可以用事件委托的方式给所有动态生成的remove-item按钮绑定点击事件：

// 用事件委托处理动态添加的按钮
$(document).on('click', '.remove-item', function(e) {
    e.preventDefault();
    const $targetItem = $(this).closest('.dynamicform_item');
    // 先执行自定义逻辑
    handleItemRemove($targetItem);
    // 移除当前行
    $targetItem.remove();
    // 记得更新动态表单的字段索引（比如[{$i}]这类序号）
    $('#dynamic-form').dynamicForm('updateIndexes');
});

结合你提供的表单字段说明 #

你用Select2渲染的产品名称字段，在自定义函数里可以通过$item.find('[name$="[productname]"]')精准定位到该字段，获取选中值的逻辑完全适配你的场景，不用担心动态生成的字段索引问题。

需要注意的点：

• 确保自定义函数在按钮点击前已经定义（比如放在页面<head>或者表单初始化代码之前）
• 如果使用方案一的onClick配置，记得保留插件默认的移除逻辑，否则表单行不会被正常移除

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