应监听 tabDelete 事件并用 this.getAttribute('lay-id') 获取被删 Tab 的 ID;需确保 lay-filter 值一致,避免使用 $(this).data('index') 或 .layui-this 等不可靠方式。

要用 Layui 的 element 模块捕获 Tab 删除事件并拿到被删 Tab 的 ID,核心是监听 tabDelete 事件,并在回调中通过 this 获取当前被删标签的 lay-id 属性值。
绑定 tabDelete 事件监听
确保你的 Tab 容器设置了正确的 lay-filter 值(比如 "demo"),然后在 layui.use(['element']) 内绑定事件:
- 事件写法为
element.on('tabDelete(demo)', callback),括号内必须和 HTML 中的lay-filter="demo"完全一致 - 回调函数执行时,
this指向被删除的那个DOM 元素,不是 jQuery 对象 - 直接调用
this.getAttribute('lay-id')即可拿到唯一业务 ID,这是最稳定的方式
为什么不能用 $(this).data('index') 或 .layui-this 查找
这些方式都不可靠:
-
$(this).data('index')返回的是 DOM 渲染顺序索引,Tab 删除后序号会变,无法对应真实 ID -
document.querySelector('.layui-tab-title .layui-this')在删除瞬间可能还没更新,容易取到上一个激活项 - Layui 内部不保证类名同步时机,尤其在快速连续操作时极易出错
完整示例代码
HTML 结构:
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="home">首页</li>
<li lay-id="user">用户管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页内容</div>
<div class="layui-tab-item">用户列表</div>
</div>
</div>
JS 监听:
layui.use(['element'], function(){
var element = layui.element;
element.on('tabDelete(demo)', function(data){
var deletedId = this.getAttribute('lay-id'); // ✅ 正确获取被删 ID
console.log('被删除的 Tab ID 是:', deletedId);
// 可在此处做清理:如销毁 iframe、清除缓存、提示用户等
});
});
补充说明
如果还想在删除前拦截(比如加确认弹窗),应监听 tabBeforeDelete 事件(Layui 2.9.11+ 支持):
- 它在真正删除前触发,返回
false可阻止删除 - 同样可通过
this.getAttribute('lay-id')拿到即将被删的 ID - 比用原生
confirm()更灵活,推荐配合layer.confirm使用











