1.在删除的元素中，加入btn-delete的类，以定位。同时添加cid=“{{ row.id }}”

同时再把row-id=“{{ row.id}}”放在tr中，如下图所示

2.把删除时弹出的模态框代码片段导入，如下图所示

完整的代码如下：

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <h4>是否确定要删除？</h4>
            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
            <p>
                <button type="button" class="btn btn-danger" id="btnConfirmDelete">确定</button>
                <button type="button" class="btn btn-default" id="btnCancelDelete">取消</button>
                <span style="color: red" id="deleteError"></span>
            </p>
        </div>
    </div>
</div>

3.把相对应的JS代码引入，以及设置全局变量，如下图所示

详细的JS代码如下图所示：

$(function (){
            bindDeleteEvent();
            bindConfirmDeleteEvent();
        });

        function bindDeleteEvent(){
            $('.btn-delete').click(function (){
                $("#deleteError").empty();

                $('#deleteModal').modal('show');
                var cid = $(this).attr('cid');
                DELETE_ID = cid;

            });


            $('#btnCancelDelete').click(function (){
               $('#deleteModal').modal('hide');
            });
        }

        function bindConfirmDeleteEvent(){
            $('#btnConfirmDelete').click(function (){
                console.log('确认删除：',DELETE_ID);

                //ajax发送请求
                $.ajax({
                    url:DELETE_URL,
                    type:'GET',
                    data: {cid:DELETE_ID},
                    dataType: 'JSON',
                    success:function (res){
                        if(res.status){
                            //删除成功
                            //方式一: 作页面的刷新
                            //location.reload();

                            //方式二: 当前数据在页面中删除
                            $("tr[row-id='"+ DELETE_ID + "']").remove();
                            $('#deleteModal').modal('hide');

                        }else{
                            //删除失败
                            $('#deleteError').text(res.detail);
                        }
                    }
                })
            });
        }

4.在django的后端视图函数中，做对应的操作