JQ处理删除弹出模态框

  在实际开发中，经常要求对于加载的表格数据进行删除，点击删除的时候弹出模态框。再到模态框上点确定删除。实现这一套逻辑很多中方法，我经常用的一种：

第一，页面的数据表格是动态加载的

$("#table_result_per").append(    "<tr>"+    "<td class='hidden'>"+list[i].id+"</td>"+    "<td>"+ parseInt(i+1)+"</td>"+    "<td>"+list[i].name+"</td>"+    "<td>"+list[i].cellphone+"</td>"+    "<td>"+list[i].level+"</td>"+    "<td>"+list[i].area_name+"</td>"+    "<td>"+list[i].unit_type+"</td>"+    "<td>"+list[i].user_type+"</td>"+    "<td>"+list[i].position+"</td>"+    "<td class='td_remove hidden_btn'>"+"<a class='address_remove hidden_btn'" +    " onclick='deletePro(this)'>"+"</a>"+    "</td>"+ "</tr>");

第二，点击删除的时候，将该行的id传到session中保存起来，并给该行设置一下id值

function deletePro(e) {    var id=$(e).parent().siblings().eq(0).text();    var position=$(".zjl_headCenter p:nth-child(1)").children().eq(4).text().trim().replace(/[\r\n]/g, '');    set_model_del();//调用模态框    sessionStorage.removeItem('ud');    sessionStorage.setItem('ud',id);    $(e).parent().parent().attr('id',id);//给tr设置一个id}

第三，点击模态框上的删除按钮的时候，就要关闭模态框并将id传到后台，还有就是将页面上的行删除，具体操作如下（因为是自己以前做的项目，所以有些没用的代码）

//删除按钮----将id传到后台并将该行删除--第二步function model_delete_id() {    //关闭删除模态框    cancel_model_del();    var ud=sessionStorage.getItem('ud');    var data={id:ud};    $.ajax({        type:'post',        url:'../../../../index.php/contacts/search/delete.html',        data:data,        success:function (result) {            if(result.code==1){                // 调用模态框                $('#result_text').html('');                setByResult();                $('#result_text').html("删除成功");                if($(`#table_result_city tr[id=${ud}]`)){                    $(`#table_result_city tr[id=${ud}]`).remove();                }                if($(`#table_result_per tr[id=${ud}]`)){                    $(`#table_result_per tr[id=${ud}]`).remove();                }                //点击删除---删除元素以后--将页码重新刷新，并将数据重新显示页面                $('.max_page').text(result.info.last_page);                $('.max_page1').text(result.info.last_page);                $('.total_number1').text(result.info.total);                $('.total_number').text(result.info.total);            }else if(result.code==0){                setByResult();                $('#result_text').html('');                $('#result_text').html(result.msg);            }        },