How to delete only DOM data in the table (code)

The content of this article is about how to delete only the dom data (code) in the form. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This article records only the deletion operation of table dom data;
//Before starting, there is a misunderstanding to avoid. For example, when the official deletion of table rows is only to delete the rows, this way This will cause your DOM data to not be changed, so the total number of items displayed in the paging area will not change. Clicking to turn the page will reload the previous DOM data into the table; so the key point is to delete data from reloading Get the form! ! !

var table;
var form;
layui.use('table', function() {
table = layui.table;
form = layui.form;
var a = 1;
table.render({
elem : '#deptUser',
id:'deptId',
height : 380,
width : 508
,page : true //开启分页
,limits: [10,20,50]
,cols : [ [ //表头
{type:'numbers', title : '序号',width : 44
},{field : 'CODE',title : '用户编号',width : 120
},{field : 'NAME',title : '用户名称'
},{fixed: 'right', title : '操作', width: 60, align:'center', toolbar: '#barDemo'
} ] ]
});
/* var $ = layui.$;
//表格顶部操作监听
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
}); */
table.on('tool(deptU)', function(obj){ //注：tool是工具条事件名
                        //定义一个接收表格数据的变量   这个可以直接取得ajax返回的数据，也可以用    layui.table.cache.tableid 取得表格的数据
var userData = layui.table.cache.tableId;
var user = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent=="delete"){
//把删除后的新数据接收并返回给userData
var newData = new Array();
var ni = 0;
for(var i=0;i<userData.length;i++){
if(userData[i].ID != user.ID){
newData[ni] = userData[i];
ni++;
}
}
userData = newData;
//所获得的 tableIns 即为当前容器的实例     重点就是这里容易被忽视的，最简单却最不起眼。。。。
var tableIns = table.render({
    elem: &#39;#deptUser&#39;
    ,id:&#39;deptId&#39;
,height : 380
,width : 508
,page : true //开启分页
,limits: [10,20,50]
,data : newData
  ,cols : [ [ //表头
      {type:&#39;numbers&#39;, title : &#39;序号&#39;,width : 44
      },{field : &#39;CODE&#39;,title : &#39;用户编号&#39;,width : 120
      },{field : &#39;NAME&#39;,title : &#39;用户名称&#39;
      },{fixed: &#39;right&#39;, title : &#39;操作&#39;, width: 60, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;
      } 
      ] ]
}); 
//上边定义的tableIns可以 使用reload方法，我这里重新渲染就可以了就没用到
}
});
});

Related recommendations:

How to implement DOM node deletion in JS

DOM node deletion function removeChild() usage example_ javascript skills

Javascript How to quickly dynamically delete and delete dom element code detailed explanation

The above is the detailed content of How to delete only DOM data in the table (code). For more information, please follow other related articles on the PHP Chinese website!