js实现点击按钮动态添加与删除layui的Tab选项卡

好的，我可以帮你实现这个功能。

首先，你需要在页面中引入layui库和jquery库：

<!-- 引入layui库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script>

<!-- 引入jquery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，你需要在页面中添加一个按钮和一个容器，用于存放选项卡：

<button id="add-tab">新增选项卡</button>
<div class="layui-tab" lay-filter="tab-demo">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
</div>

接下来，你需要编写js代码来实现点击按钮动态添加与删除选项卡的功能：

// 初始化选项卡
layui.use('element', function(){
  var element = layui.element;
});

// 点击按钮新增选项卡
$('#add-tab').click(function() {
  var title = '选项卡' + ($('.layui-tab-title li').length + 1); // 新增选项卡的标题
  var content = '内容' + ($('.layui-tab-content .layui-tab-item').length + 1); // 新增选项卡的内容
  var tabTpl = '<li lay-id="{id}" class=""><a href="javascript:;">{title}</a></li>'; // 选项卡模板
  var contentTpl = '<div class="layui-tab-item">{content}</div>'; // 选项卡内容模板
  var id = new Date().getTime(); // 选项卡的唯一标识
  var tabHtml = tabTpl.replace(/{id}/g, id).replace(/{title}/g, title); // 替换选项卡模板中的占位符
  var contentHtml = contentTpl.replace(/{content}/g, content); // 替换选项卡内容模板中的占位符
  $('.layui-tab-title').append(tabHtml); // 添加选项卡
  $('.layui-tab-content').append(contentHtml); // 添加选项卡内容
  layui.use('element', function(){
    var element = layui.element;
    element.tabAdd('tab-demo', {
      title: title,
      content: content,
      id: id
    });
  });
});

// 点击选项卡上的关闭按钮删除选项卡
$('body').on('click', '.layui-tab-title li i', function() {
  var id = $(this).parent().attr('lay-id'); // 获取选项卡的唯一标识
  layui.use('element', function(){
    var element = layui.element;
    element.tabDelete('tab-demo', id); // 删除选项卡
  });
});

以上代码中，我们使用了`layui.element`模块来实现选项卡的添加和删除。在新增选项卡时，我们使用了模板字符串和正则表达式来替换占位符，生成选项卡和选项卡内容的html代码。在删除选项卡时，我们使用了事件委托的方式来绑定事件，以便于处理动态生成的选项卡。

好了，以上就是实现点击按钮动态添加与删除layui的Tab选项卡的代码了，你可以根据自己的需求进行修改。