使用ajax从数据库中删除表行后如何删除表行？答案

【问题标题】：how to remove table row after delete it from the database using ajax?使用ajax从数据库中删除表行后如何删除表行？
【发布时间】：2017-11-07 14:35:31
【问题描述】：

我试图添加$tr.find('td').fadeOut(1000, function () { $tr.remove(); 单击删除按钮后删除该行，但它不起作用..

function Delete(ID) {
        var ans = confirm("Are you sure you want to delete this Record?");

        if (ans) {
            $.ajax({
                url: '@Url.Action("Delete")',
                data: JSON.stringify({ ID: ID }),
                async: true,
                cache: false,
                type: "Post",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    $tr.find('td').fadeOut(1000, function () {
                        $tr.remove();

                    });
                    //alert(result);
                },
                error: function (errormessage) {

                    alert(errormessage.responseText);
                }
            });
        }
    }

ajax 函数运行良好，该行已从数据库中删除..

【问题讨论】：

你怎么打电话给Delete？
你在哪里定义过$tr？
我在点击删除.. @Shyju
我不知道我以为我是在这样使用它时定义的，是吗？@Shyju

标签： jquery html ajax asp.net-mvc asp.net-ajax

【解决方案1】：

您的代码将失败，因为您使用的是未在方法内部定义的$tr。（如果你在外面定义了，那就更糟糕了）。

您必须访问存在删除按钮/链接的tr。如果您使用 onclick 事件处理程序来调用 Delete 方法，您可以将 this 连同您传递的 id 一起传递给您的 Delete 方法，并从中获取对 tr 的访问权限。

jQuery closest 方法在这里会很方便

 <a href="#" onclick="Delete(someId,this)">Delete</a>

在js中

function Delete(id,t) {

    $tr= $(t).closest("tr");

    // make the ajax  call
    // Use $tr now in your ajax call's success event

    $tr.find('td').fadeOut(700, function () {
        $tr.remove();    
    });
}

如果您使用普通的 javascript 来绑定删除按钮/链接的click 事件，您可以使用$(this) 来获取对被点击项目的引用。在这种情况下，您实际上可以构建 url 以删除带有 id 的操作方法，并将其设置为链接的 href 值

<td>
     <a href="@Url.Action("Delete",new { id=1234})" class="delete-item">Delete</a>
</td>

将 1234 替换为您在代码中的实际 id 值并且在js文件中，可以使用attr方法读取点击链接的url。

$(function () {

    $("a.delete-item").click(function(e) {
        e.preventDefault();

        $tr = $(this).closest("tr");
        var url = $(this).attr("href");

        $.post(url).done(function() {
            $tr.find('td').fadeOut(700,function() {
                    $tr.remove();
            });
        });

    });
});

Here 是供您参考的两种解决方案的工作 jsfiddle（不包括 ajax 调用）。

【讨论】：

【解决方案2】：

你的意思是这样的吗？

success: function (result) {
                    var selector = "#"+ID;
                    $(selector ).fadeOut(1000);
                    setTimeout(function(){
                            $(selector ).remove()
                        }, 1000);
                },

【讨论】：

【解决方案3】：

使用 id

<td id="td...">

替换

$tr.find('td').fadeOut(1000, function () {
    $tr.remove();
});

作者

$('#td...').fadeOut(1000, function () {
    $('#td...').remove();
});

【讨论】：