Comment supprimer uniquement les données DOM dans la table (code)

Le contenu de cet article explique comment supprimer uniquement les données DOM (code) du formulaire. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article enregistre uniquement l'opération de suppression des données du tableau dom
//Avant de commencer, il y a un malentendu à éviter. Par exemple, lorsque la suppression officielle des lignes du tableau consiste uniquement à supprimer la ligne, de cette façon, vos données DOM ne seront pas modifiées, donc le nombre total d'éléments affichés dans la zone de pagination ne changera pas. Cliquer pour tourner la page rechargera les données DOM précédentes dans le tableau, le point clé est donc de les supprimer. données issues du rechargement Obtenez le formulaire ! ! !

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方法，我这里重新渲染就可以了就没用到
}
});
});

Recommandations associées :

Comment implémenter la suppression de nœud DOM dans JS

Utilisation de la fonction de suppression de nœud DOM RemoveChild() Exemple de compétences Javascript

Javascript comment supprimer et supprimer rapidement et dynamiquement le code de l'élément dom explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!