ajax删除数据？

Question

需求是客户点击查询，获取后台数据，页面展示视频列表，时间，和地点信息。
点击删除，删除单个视频及其信息。

js代码：

//查询操作
function getInfo(pagenum,createtime,location) {

sessionStorage.setItem('pagenum', pagenum); //保存当前页数
$.ajax({
    type: 'post',
    url: 'http://127.0.0.1:8080/gateway/CaptureandRecord?method=getvideo',
    dataType: 'text',
    data: {
        'pagenum': pagenum,
        'createtime':createtime,
        "location":location,
    },
    async: false,
    success: function(data) {
        console.log("data"+data);
        var data = JSON.parse(data);
        console.log("data"+data);
        var list = data.videos;

        if (data.flag == "success") {
            $('#content .row').html("");
            for (var i = 0; i < (data.countmessage<parseInt(pagenum)*8?data.countmessage-(parseInt(pagenum)-1)*8:8); i++) {
                $('#content .row').append(

                    '<div class="col-md-3">' +
                    ' <div class="view">' +
                    '<video id="'+list[i].uid+'" src="' + list[i].video + '" controls="controls">' +
                    '</video>'+
                    '</div>' +
                    '<ul>' +
                    '<li>' +
                    '<span>时间：</span>' +
                    '<span>' + data.time[i] + '</span>' +
                    '</li>' +
                    '<li>' +
                    '<span>位置：</span>' +
                    '<span>' + list[i].location + '</span>' +
                    '</li>' +
                    '<li>' +
                    '<button class="delete" onclick="delInfo(' + list[i].uid + ')" data-whatever="' + list[i].uid + '">删除</button>' + 
                    '</li>' +
                    '</ul>' +
                    '</div>'
                )
            }
        }

//删除操作
function delInfo(button,id) {

$.ajax({
    type: 'post',
    url: 'http://127.0.0.1:8080/gateway/CaptureandRecord?method=deletevideobyuid',
    dataType: 'text',
    data: {
        "uid": id,
    },
    async: true,
    success: function(data) { 
        var data = JSON.parse(data);
        if (data.flag == 'success') {
            alert('删除成功');
         $('button').parents('.col-md-3').remove();
        } else {
            alert("删除失败");
        }
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest.status);
        console.log(XMLHttpRequest.readyState);
        console.log(textStatus);
    },
})

}

查询操作中的删除按钮button在点击后调用delInfo(button,id)时，只能返回id，无法传入参数button。（传入button的作用是为了通过button按钮，找到图片的父级，将其删除）
导致在数据库删除了，却无法在页面删除，要怎么解决？

Answer 1

复制粘贴可用

function getInfo(pagenum,createtime,location) {

    sessionStorage.setItem('pagenum', pagenum); //保存当前页数
    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:8080/gateway/CaptureandRecord?method=getvideo',
        dataType: 'text',
        data: {
        'pagenum': pagenum,
        'createtime':createtime,
        "location":location,
        },
        async: false,
        success: function(data) {
        console.log("data"+data);
        var data = JSON.parse(data);
        console.log("data"+data);
        var list = data.videos;

        if (data.flag == "success") {
            $('#content .row').html("");
            for (var i = 0; i < (data.countmessage<parseInt(pagenum)*8?data.countmessage-(parseInt(pagenum)-1)*8:8); i++) {
                $('#content .row').append(

                    '<div class="col-md-3">' +
                    ' <div class="view">' +
                    '<video id="'+list[i].uid+'" src="' + list[i].video + '" controls="controls">' +
                    '</video>'+
                    '</div>' +
                    '<ul>' +
                    '<li>' +
                    '<span>时间：</span>' +
                    '<span>' + data.time[i] + '</span>' +
                    '</li>' +
                    '<li>' +
                    '<span>位置：</span>' +
                    '<span>' + list[i].location + '</span>' +
                    '</li>' +
                    '<li>' +
                    '<button class="delete" onclick="delInfo(this,' + list[i].uid + ')" data-whatever="' + list[i].uid + '">删除</button>' + 
                    '</li>' +
                    '</ul>' +
                    '</div>'
                )
            }
        }
        }
    })
}

/**
 * [delInfo 删除]
 * @param   当前对象 this
 * @param   ID
 * @return   
 */
function delInfo(obj,id) {
    var t = obj;
    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:8080/gateway/CaptureandRecord?method=deletevideobyuid',
        dataType: 'text',
        data: {
            "uid": id,
        },
        async: true,
        success: function(data) { 
            var data = JSON.parse(data);
            if (data.flag == 'success') {
                alert('删除成功');
             $(t).parents('.col-md-3').remove();
            } else {
                alert("删除失败");
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        },
    })
}

Answer 2

$('button').parents('.col-md-3').remove();

你这句是删页面上所有的.col-md-3啊，这样都删不了？
其实你把onclick换成jQ的事件代理写法就行了，直接用$(this)多好。事件传参不是那么写的嘛。
另外ajax里的dataType是text后边干嘛还JSON.parse一遍呢，直接写json就行。sucesss回调的传参和定义局部变量的名字能分开还是别写一样吧。async参数不建议用了，保持默认的异步就好。手机端就不放代码了。

Answer 3

生成列表的时候，将col-md-3的class属性改为calss="col-md-3 row-id-'+list[i].id+'"。然后在delInfo里面在用jquery查找这个class就好了

Answer 4

调用delInfo的时候你只传了id啊， 并没有传button (this)

Answer 5

你这个button是后生成，需要用$().on();来绑定操作，建议看下JQ的API

Answer 6

删除之后的callback里面再重新执行一次getInfo()，不行么？