var imgArr = []; // 上传图片的数组 var uploadFlag = false // 文件是否处于上传成功的状态 // 多文件数据回显 function fileListsEcho(imgArr) { var fileLists = JSON.parse('${hrResumeProfile.files}') if (fileLists.length>0) { for (var i=0; i<fileLists.length; i++) { var tr = $(['<tr>' ,'<td>'+ fileLists[i].name +'</td>' ,'<td></td>' ,'<td class="progressState" style="color: green">上传成功!</td>' ,'<td>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-deletee" index='+i+' data-info='+fileLists[i].url+'>删除</button>' ,'</td>' ,'</tr>'].join('')); imgArr.push(fileLists[i].url) uploadFlag = true $('#demoList').append(tr) } } } fileListsEcho(imgArr) //删除逻辑 (获取当前点击节点上的属性时,必须通过 event事件形参或进行获取你保存在当前触发事件节点上的信息) $('.demo-deletee').on('click', function(e){ // console.log(imgArr); imgArr = imgArr.filter(item=>{ return item !== e.target.attributes['data-info'].value }) // console.log(imgArr); var dom = $('.demo-deletee').parent().parent() var index = e.target.attributes.index.value dom[index].remove() return false });
通过jQuery循环展示渲染节点后,按钮点击删除对应数据条(节点上自定义属性传参)
最新推荐文章于 2023-11-22 09:57:39 发布