Question

数据来自后端，每行都有一个删除按钮，该按钮可从数据库中删除行数据。

数据已成功删除，但未删除行。

我在这里尝试了各种问题，并尝试了所有可能的解决方案，但没有为我工作

function myFunction(id){
    var url = "http://localhost:8080/CurdAppBackend/emp/delete/"+ id;

    $.ajax({
        type : "DELETE",
        url : url,
        success: function (result) {       
               alert("DELETED");
               f$('.table tbody').closest(id).remove();
        },
        error: function (e) {
            alert(JSON.stringify(e));
        }
    });
};

这是表数据的加载方式

$(document).ready(function(){
    var url = "http://localhost:8080/CurdAppBackend/emp/allEmp";

    $.get({
        url: url,
        datatype: "json",
        contentType: "application/json",
        success: function(data){
            var users = JSON.parse(JSON.stringify(data));

            for (var i in users) {
                $("tbody").
                append("<tr id="+users[i].empId+"> \
                            <td>" +  users[i].empId + "</td> \
                            <td>" +  users[i].createdAt + "</td> \
                            <td>" +  users[i].empName + "</td> \
                            <td>" + users[i].empMobile + "</td> \
                            <td>" + users[i].empDesg + "</td> \
                            <td>" + users[i].unit + "</td> \
                            <td>" +'<button onclick="myFunction('+users[i].empId+')" class="btn btn-outline-danger" id=del>DELETE</button>'+"</td> \
                            </tr>");              
            }                   


        },
        error: function(e){
            alert("Something Went Wrong  "+e);
        }
    });

Answer 1

使用：$('#'+id).remove();

而不是：f$('.table tbody').closest(id).remove();

Answer 2

有很多方法可以做到这一点：

以下给出的2种方法：

第一种方法：

function myFunction(id, obj){
    var url = "http://localhost:8080/CurdAppBackend/emp/delete/"+ id;

    $.ajax({
        type : "DELETE",
        url : url,
        success: function (result) {       
               $(obj).parents('tr').remove();
        },
        error: function (e) {
            alert(JSON.stringify(e));
        }
    });
};

将您的代码更改为：因为在模板方法中最好，因为您不会忘记任何引号并且易于实现，所以

$(document).ready(function(){
    var url = "http://localhost:8080/CurdAppBackend/emp/allEmp";

    $.get({
        url: url,
        datatype: "json",
        contentType: "application/json",
        success: function(data){
            var users = JSON.parse(JSON.stringify(data));

            for (var i in users) {
                $("tbody").
                append(`<tr id="${users[i].empId}">
                            <td>${users[i].empId}</td>
                            <td>${users[i].createdAt}</td>
                            <td>${users[i].empName}</td>
                            <td>${users[i].empMobile}</td>
                            <td>${users[i].empDesg}</td>
                            <td>${users[i].unit}</td>
                            <td><button onclick="myFunction(${users[i].empId}, this)" class="btn btn-outline-danger" id=del>DELETE</button></td>
                            </tr>`);              
            }                   


        },
        error: function(e){
            alert("Something Went Wrong  "+e);
        }
    });

在这里，我通过函数调用传递了refrence，因为这是进入obj，然后在其中找到父级“ tr”，然后将其删除。

第二种方法 更改给线：

f$('.table tbody').closest(id).remove();

到

$('table').find(`id="${id}"`).remove();

我找到了它，因为在某些情况下虽然没有通过ajax动态加载数据。然后我们必须在dom中找到该对象，

删除选定行后，不会发生动态行删除

这是表数据的加载方式

2 个答案: