Данные были удалены из базы данных, но строка таблицы не удалена, и общая запись не уменьшена в php с помощью ajax

Question

Данные - это удаленная база данных, но строка таблицы не удалена и общее количество не уменьшено. Php ajax Я создаю сайт электронной коммерции для моего проекта за последний год.Я столкнулся с проблемой удаления продукта.если я удаляю продукт был удален из базы данных успешно.но итоговый итог не уменьшился, и строка таблицы не удалила то, что я пытался до сих пор, я прикрепил ниже вместе со скриншотом ниже.

Таблица

<div class="container">
                <table class="table table-striped" id="mytable">
                    <thead>
                    <tr>
                        <th>ProductID</th>
                        <th>Productname</th>
                        <th>Price</th>
                        <th>Qty</th>
                        <th>Amount</th>
                        <th>Delete</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>

        </div>

        <div style='text-align: right; margin:10px'>
            <label><h3>Total amount: </h3></label>
            <span style="font-size: 40px; color: #ff0911" id='total-amount'></span>
        </div>

Показать продукты

<script> 
getProducts();
function getProducts() {
    $.ajax({
        type: 'GET',
        url: 'all_cart.php',
        dataType: 'JSON',
        success: function(data) {
            data.forEach(function(element) {
                var id = element.id;
                var product_name = element.product_name;
                var price = element.price;
                $('#mytable tbody').after
                (
                    '<tr> ' +
                    '<td>' + id + '</td>' +
                    '<td>' + product_name + '</td>' +
                    '<td>' + price + '</td>' +
                    "<input type='hidden' class='price' name='price' value='" + price + "'>" +
                    '<td>' + "<input type = 'text' class='qty' name='qty' value='1'/>" + '</td>' +
                    '<td>' + "<input type = 'text' class='amount' id='amount' disabled/>" + '</td>' +

                    '<td>' +  " <Button type='button' class='btn btn-primary' onclick='deleteProduct(this," + id + ")' >Delete</Button> " + '</td>' +
                    '</tr>');
            });
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

Подсчет суммы

$(function() {
    $(".price, .qty").on("keydown keyup click", function () {
        var price = $(this).parents('tr').find('.price');
        var qty= $(this).parents('tr').find('.qty');
        var sum = (
        Number($(price).val()) * Number($(qty).val())
        );
        $(this).parents('tr').find('.amount').val(sum);
        calculateAmount();
    });
});

function calculateAmount() {
    var total = 0;
    $('.amount').each(function(e){
        total += Number($(this).val());
    });
    $('#total-amount').text(total);
}

удалить функцию продукта

function deleteProduct(event, id) {
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                        $(event).parent('tr').remove();
                        calculateAmount();
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });
}

remove.php

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    include "db.php";
    $conn = new mysqli($servername, $username, $password, $dbname);
    $stmt = $conn->prepare("delete from cart where id=?");
    $stmt->bind_param("s", $id);
    $id = $_POST["id"];
    if ($stmt->execute())
        {
            echo 1;
        }
    else 
        {
                echo 0;
        }
        $stmt->close();
        }
?>

Answer 1

Вы можете использовать логику как:

При отображении товаров (отредактируйте строку, , просто назначьте динамический идентификатор тегу tr ) -

....
'<tr id=tr_'+id+'> ' +
....

& в функции удаления продукта (удалить соответствующий tr, используя id) -

....
$('#tr_'+id).remove();
....

В вашем коде ...

Функция продуктов Diplay-

<script> 
getProducts();
function getProducts() {
    $.ajax({
        type: 'GET',
        url: 'all_cart.php',
        dataType: 'JSON',
        success: function(data) {
            data.forEach(function(element) {
                var id = element.id;
                var product_name = element.product_name;
                var price = element.price;
                $('#mytable tbody').after
                (
                    '<tr id=tr_'+id+'> ' +
                    '<td>' + id + '</td>' +
                    '<td>' + product_name + '</td>' +
                    '<td>' + price + '</td>' +
                    "<input type='hidden' class='price' name='price' value='" + price + "'>" +
                    '<td>' + "<input type = 'text' class='qty' name='qty' value='1'/>" + '</td>' +
                    '<td>' + "<input type = 'text' class='amount' id='amount' disabled/>" + '</td>' +

                    '<td>' +  " <Button type='button' class='btn btn-primary' onclick='deleteProduct(this," + id + ")' >Delete</Button> " + '</td>' +
                    '</tr>');
            });
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });

& в функции удаления-

function deleteProduct(event, id) {
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                        //$(event).parent('tr').remove();
                        $('#tr_'+id).remove();
                        calculateAmount();
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });
}

Я просто объясняю логику ... но вам нужно подробно остановиться на настройке оставшихся звонков ..:)

Answer 2

если вы удаляете данные из таблицы после удаления, попробуйте использовать этот код

1.a после успешного возврата функция удаления снова запустится getProducts() данные функции снова извлекаются и сбрасываются в таблицу

2.Функция удаления: возврат всех данных в случае успеха с помощью php. Перейдите на remove.php, выберите запрос всех данных и верните все данные

function deleteProduct(event, id) {
            $.ajax({
                type: 'POST',
                url: 'remove.php',
                dataType: 'JSON',
                data: {id: id},
                success: function (data) {
                     getProducts();
                    $(event).parent('tr').remove();
                    calculateAmount();
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText);

                }
            });

.