Layui tree组件如何动态删除节点-Layui教程-PHP中文网

layui tree 删除节点必须操作原始 data 数组，不能直接删 DOM；需递归过滤目标节点及其后代，更新 treeData 后调用 tree.render()；开启复选框时须同步清理勾选状态。

layui tree 删除节点必须操作原始 data 数组，不能直接删 DOM

layui tree 渲染后，dom 和数据已脱钩。你用 $('li[data-id="123"]').remove() 或 jquery 移除元素，下次调用 tree.render() 会立刻恢复——它只认你传进去的 data 数组。真正有效的删除，只能从源头数据下手。

维护一份全局树数据，比如叫 treeData，所有增删改都基于它
删除前先确认该节点是否已在 treeData 中（懒加载未展开的子节点可能还没加载进数组）
必须递归过滤掉目标节点及其全部后代，不能只删一级 children
删完立即调用 tree.render({ elem: '#tree', data: treeData })，否则界面无变化

递归删除某节点及其所有子节点的正确写法

靠 Array.prototype.filter() + 递归函数实现干净过滤。关键点是：用 id 做唯一标识，且函数要返回新数组（不可 mutate 原数组）。

function removeNodeById(data, targetId) {
  return data.filter(node => {
    if (node.id === targetId) return false; // 跳过该节点
    if (node.children && node.children.length) {
      node.children = removeNodeById(node.children, targetId);
    }
    return true;
  });
}

// 使用示例
treeData = removeNodeById(treeData, 123);
tree.render({ elem: '#tree', data: treeData });

注意：如果节点有 children 但从未展开过（懒加载），它的 children 可能为空或根本不存在字段，此时递归不会深入，也无需担心——因为那些子节点压根不在当前 treeData 里。

开启 `showCheckbox: true` 后，删除节点 checkbox 状态错乱怎么办

layui 内部维护了一套勾选状态缓存，不随 data 变动自动同步。删了一个已勾选的节点，但没清理勾选记录，重绘后可能出现“半选”残留或勾选丢失。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

删除前调用 tree.checkStatus('demoId') 获取当前勾选的 id 数组
删完节点后，用 filter 剔除已不存在的 id：checkedIds = checkedIds.filter(id => findNodeById(treeData, id))
再调用 tree.setChecked('demoId', { checked: checkedIds })（layui 2.8+ 支持）
如果用旧版 layui，得自己 patch 或重置整个勾选逻辑