通过jQuery循环展示渲染节点后,按钮点击删除对应数据条(节点上自定义属性传参)

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
            });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值