Javascript 在引导模式中确认AJAX成功后隐藏卡片

“我的删除”页面包含多篇带有“删除”按钮的帖子，当按下“删除”按钮时，引导模式将打开并要求确认

是否确实要删除帖子？是：否

当按下

YES

按钮

时，单击（函数（e）{….}

向数据库发送

AJAX

请求，如果AJAX返回

success

，则应隐藏特定卡

所以我尝试了以下代码

    $(document).ready(function () {
            $("#confirm").click(function (e) {

                e.preventDefault();
                var that = this;

                const act = $(this).attr('data-act');
                const para = $(this).attr('data-para');
                const hash = $(this).attr('data-hash');
                $.ajax({
                    url: '/include/ajax/mark_sold.php', // Call delete.php to update the database
                    method: 'POST',
                    data: {action: act, para: para, hash: hash},
                    cache: false,
                    success: function (data, status) {
                        $("#fetched").html(data);
                        $('#myModal').modal('hide');
                         $(that).closest('div.card').hide();  //to hide div after ajax success
                    },
                    error: function (xhr, statusText, error) {
                        $("#fetched").show();
                        $("#confirmButton").hide();
                    }
                });
            });
            return false;
        });

HTML

<div class="card border-0 small col-lg-3 col-md-2 col-6 mb-2 px-1">
  <img class="card-img-top rounded-0" src="/upload/" alt="Card image cap">
<div class="card-body pb-0 pt-2 px-0">
    <h6 class="card-title text-dark text-truncate">title</h6>
</div>

<button data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-sm modalopen"    data-hash="6d8ce77d206011027297b693be999704" data-para="A4IxzuRP8ATv">delete</button>
</div>

标题
删除

在模式中确认后如何隐藏卡

---

代码中的问题是，变量“

”和“

不是指删除按钮，而是指对话框的确认按钮，因此您不能使用

最接近（）

函数。此时，您应该为卡/删除按钮使用特定标识。例如：

$('button[data-hash="'+hash+'"]') .closest('div.card').hide();

我在代码中没有看到的另一点是将数据变量（act、para、hash）传输到对话框确认按钮。例如，您的代码

$（this）。attr（'data-hash'）

无法从删除按钮获得值，因为

$（this）

指对话框确认按钮。解决此问题的方法是向对话框按钮传递唯一标识符

$(".deleteBtn").on('click',function(){ //Add on click event to all delete buttons
    $("#confirm").data("hash",$(this).data("hash")); //Pass hash value to dialog confirm button
});

$("#confirm").click(function (e) {
    e.preventDefault();

    var delBtn = $('button[data-hash="'+$(this).data("hash")+'"]'); //Get specific delete button element by passed hash value

    const act = delBtn.attr('data-act'); //Get data variables from the delete button element
    const para = delBtn.attr('data-para');
    const hash = $(this).data("hash");
    $.ajax({
        url: '/include/ajax/mark_sold.php',
        method: 'POST',
        data: {action: act, para: para, hash: hash},
        cache: false,
        success: function (data, status) {
            $("#fetched").html(data);
            $('#myModal').modal('hide');
            delBtn.closest('div.card').hide();  //Find closest .card element to the specified delete button
        },
        error: function (xhr, statusText, error) {
            $("#fetched").show();
            $("#confirmButton").hide();
        }
    });
});

不要忘记将

.deleteBtn

类添加到删除按钮中

---

希望有帮助。

这里：

url:'/include/ajax/mark_selled.php'

，你怎么知道要删除什么？我的意思是，代码中的某些内容应该是要删除的元素的标识，对吧？当你点击删除按钮时，除了显示模式外，你还应该保存标识，以便进一步隐藏正确的元素感谢它的工作，我删除了数据变量传输部分，以使代码更具可读性。