用JS实现点击按钮动态删除DIV

 
<div id="a"  >
此处为要删除的DIV
<button  id="remove" type="button" class="close" style="margin-bottom: -7px" οnclick="DeleteDiv(this)">×</button>
</div>

JS代码:

<script>
			function DeleteDiv(obj)  
			{     
			    if(w)
			    <!--var strid=obj.name;-->  
			    //获取本删除按钮的id值,并创建对象  
			    var strid=obj.id;  
			    var o=document.getElementById(strid);  
			    var z=o.parentElement;  
			    <!--var o=document.getElementsByTagName(strid)[4].parentElement;-->  
			    //找到这个删除按钮对应的父div的值  
			    <!--var stridone=document.getElementsByName(strid)[0].parentNode.id;-->  
			    var stridone=z.id; 
			    //判断本id对应的值并删除  
			    var my = document.getElementById(stridone);  
			    if (my != null){  
			    my.parentNode.removeChild(my);}  
			    <!--window.location.reload(); -->  
			} 
</script>

受https://blog.csdn.net/cfl20121314/article/details/17092615启发,此处先借鉴部分,留待后续学习。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你实现这个功能。 首先,你需要在页面中引入layui库和jquery库: ```html <!-- 引入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> ``` 然后,你需要在页面中添加一个按钮和一个容器,用于存放选项卡: ```html <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代码来实现点击按钮动态添加与删除选项卡的功能: ```javascript // 初始化选项卡 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选项卡的代码了,你可以根据自己的需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值