如何在删除表格行后为后续Select2对象递减复用ID与名称？

我来帮你搞定这个表格行删除后Select2 ID连续更新的问题～核心思路就是删除行之后，遍历后续的所有行，重新给对应的Select2组件分配递减后的ID，同时要注意Select2组件的销毁和重新初始化，不然直接改ID会导致组件失效。

具体实现步骤与代码示例 #

1. 监听行删除事件：给删除按钮绑定点击事件，拿到被删除行的编号
2. 遍历后续行更新ID：对被删除行之后的每一行，计算新的ID并更新
3. 处理Select2组件状态：先销毁旧的Select2实例，改完ID后重新初始化

// 用事件委托绑定删除按钮（兼容动态添加的行）
$(document).on('click', '.delete-row', function() {
    // 获取当前要删除的行
    const deletedRow = $(this).closest('tr');
    // 提取被删除行里Select2的编号
    const select2Id = deletedRow.find('[id^="fmselection"]').attr('id');
    const deletedNum = parseInt(select2Id.replace('fmselection', ''));
    
    // 删除当前行
    deletedRow.remove();
    
    // 遍历被删除行之后的所有行，更新Select2的ID
    deletedRow.nextAll('tr').each(function(index) {
        // 计算新的编号：原编号 = deletedNum + index + 1，新编号 = 原编号 - 1
        const newNum = deletedNum + index;
        const select2El = $(this).find('[id^="fmselection"]');
        
        // 先销毁Select2实例，避免改ID后组件失效
        select2El.select2('destroy');
        
        // 重设ID属性
        select2El.attr('id', `fmselection${newNum}`);
        
        // 重新初始化Select2（这里替换成你自己的配置）
        select2El.select2({
            placeholder: '请选择',
            // 你的其他配置项，比如ajax数据源、下拉选项等
        });
    });
});

关键注意事项 #

• 必须先销毁再初始化：Select2会和DOM元素的原始ID绑定，直接修改ID会导致组件无法响应操作，所以一定要先调用select2('destroy')再改ID
• 事件委托处理动态行：如果你的表格行是通过JS动态添加的，一定要用$(document).on('click', '.delete-row', ...)这种事件委托方式，不然新增的删除按钮会没效果
• 编号提取容错：如果担心ID格式不标准，可以加个判断，比如if (!isNaN(deletedNum))再执行后续逻辑，避免报错

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