The record in the database is deleted, but the delete button remains on the front-end interface

Question

When the delete button is clicked, it successfully deletes the record from the database. However, it is not deleted immediately on the front-end page. The deletion result will not be displayed until the page is reloaded or refreshed.

My view:

@foreach (var item in Model)
{
<a href="#" class="phone_number" onclick="del(this)" data-id="@item.id">
 <i class="fas fa-trash-alt"></i>
</a>
}
<script>
 function del(x) {
            var url = '@Url.Action("deleteRent", "Home")';
            
            var rd = x.dataset.id
            debugger

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    ID: rd
                },
                success: function (data) {
                    if (data.length == 0) // No errors
                        alert("Deletion successful!");
                },
                error: function (jqXHR) { // Http Status is not 200
                },
                complete: function (jqXHR, status) { // Whether success or error it enters here
                }
            });
        };
       </script>

Answer 1

Please add window.location.reload() code after alert....

success: function (data) {
                if (data.length == 0) // 没有错误
                    alert("删除成功！");
                    **window.location.reload();**
            },

This code will automatically reload your page upon success

Answer 2

Actually, you deleted the data from the database, but you didn't refresh the page.

Alternatively, you use Dipendrasinh Vaghela's answer and refresh the entire page.

Alternatively, if you have a function that searches and displays in the DOM, you can call it when the deletion is successful. This will "only" update the part showing the data.