jQuery移除<li>节点异常：点击弹窗按钮后列表项未彻底删除

我来帮你拆解下问题，然后给出可行的修复方案：

先看你当前的代码，这里藏着一个异步操作的典型误区——你在each循环里逐个调用确认弹窗，但如果app.showConfirmModalFunc是异步的（绝大多数自定义模态框都是异步的，不会像原生confirm那样阻塞代码执行），直接会导致逻辑混乱：

$('#srsDetail_btnRemovePerson').off().on('click', function (e) { 
    e.preventDefault(); 
    $("#srsDetail_Users .ui-selected").each(function (i, o) { 
        if (app.showConfirmModalFunc(mg.ConfirmDeleteRecord, 'Delete User', function () { 
            $(o).remove(); 
        })) { 
            return; 
        } 
    }); 
});

问题根源 #

1. 异步弹窗导致循环失控：循环会在用户点击确认按钮前就遍历完所有选中项，等用户操作弹窗时，o的引用可能已经失效，甚至会弹出多个确认框，完全不符合预期。
2. return语句无效：return在each循环里只是跳过当前迭代，不是终止整个循环，所以即使第一个弹窗弹出，循环还是会继续处理其他选中项。
3. 缺少后端同步逻辑：你提到需要同步后端数据，但原代码里没有这部分逻辑，就算前端移除了元素，刷新页面后数据还是会回来。

修复方案 #

方案1：先收集选中项，再批量确认移除 #

不要逐个弹窗，先把所有选中的元素存起来，只弹一次确认框，确认后批量移除并同步后端：

$('#srsDetail_btnRemovePerson').off().on('click', function (e) {
    e.preventDefault();
    
    // 先收集所有选中的元素，存为jQuery对象
    const $selectedItems = $("#srsDetail_Users .ui-selected");
    
    // 没有选中项直接返回，避免空弹窗
    if ($selectedItems.length === 0) return;
    
    // 只弹出一次确认框，确认后批量处理
    app.showConfirmModalFunc(mg.ConfirmDeleteRecord, 'Delete User', function () {
        // 移除所有选中的列表项
        $selectedItems.remove();
        
        // 同步后端数据（替换成你的实际API调用逻辑）
        // 示例：获取选中项的ID，发送到后端删除
        const userIds = $selectedItems.map(function() {
            return $(this).data('userId'); // 假设你的li用data-userId存用户ID
        }).get();
        
        $.ajax({
            url: '/api/delete-users',
            method: 'POST',
            data: { ids: userIds },
            success: function() {
                console.log('后端数据同步成功');
            },
            error: function() {
                alert('删除失败，请重试');
                // 失败可考虑恢复前端元素，或者给用户明确提示
            }
        });
    });
});

方案2：修复选择器插件状态（可选） #

如果你用了jQuery UI Selectable插件，移除元素后可能需要刷新插件状态，避免样式残留：

// 在移除元素后添加这行代码
$("#srsDetail_Users").selectable('refresh');

额外检查点 #

• 确认app.showConfirmModalFunc的回调是在用户点击确认按钮时才执行的，而不是弹窗显示时就触发。
• 检查你的<li>元素是否正确带有ui-selected类，确保选择器$("#srsDetail_Users .ui-selected")能准确选中目标元素。

补充你提供的相关信息：

• 删除前的列表状态：列表共3行，1行为橙色选中状态（对应ui-selected类）
• 删除后的列表状态：仍显示3行，橙色选中行未被移除，预期剩余2行
• 相关CSS样式：

.simpleselectable .ui-selecting { background: #FECA40; } 
.simpleselectable .ui-selected { background: #F39814; color: white; } 
.simpleselectable { list-style-type: none; margin: 0; padding: 0; width: 97%; } 
.simpleselectable li { margin: 3px; padding: 0.4em; font-size: 0.8em; height: 30px; line-height: 1em; border:solid 1px #DDD; background-color:#CCE5ED; cursor:pointer; margin-left: 3px;} 
.simpleselectable li:focus { background: green; }

• HTML结构：列表容器为带simpleselectable类的<ul>，内部包含多个<li>子元素，选中项带有ui-selected类

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