Ajax調用不刪除div

Question

我有一個PHP頁面，其中部分有一個表。 我提供了一個刪除按鈕，以便在單擊該條目后可以將其刪除。 我進行了Ajax調用，從數據庫然后從UI刪除數據。

這是我的php頁面的一部分：

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Your Promotion History</h3>
    </div><!-- /.box-header -->
    <div id="promoteajax" class="product_class_entry">
        <div class="box-body">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                        <th>Col 4</th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>

                <?php 
                    $query1 = mysqli_query($con,"...some query here...");
                    while($row=mysqli_fetch_array($query1))
                    {
                        ...some data fetched from DB here... ?>
                        <div id="product_entry_<?php echo $id?>" class="product_class_entry_<?php echo $id?>">
                            <tr>
                                <td><font size=2px><?php echo $date?></font></td>
                                <td><font size=2px><?php echo $ProductName?></font></td>
                                <td><font size=2px><?php echo $Category.' / '.$SubCategory?></font></td>
                                <td><font size=2px><?php echo $MRP.' / '.$Price?></font></td>
                                <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DirectPromoteSubmit(<?php echo $id?>)">Promote</button></td>
                                <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="RePromoteSubmit(<?php echo $id?>)">Edit</button></td>
                                <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DelPromoteSubmit(<?php echo $id?>)">X</button></td>
                            </tr>
                        </div>
                    <?php }
                ?>
            </tbody>
            <tfoot>
                <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </tfoot>
        </table>
    </div><!-- /.box-body -->
</div>

這是我的AJAX代碼：

<?php
    include("../dbconnection.php");
    include("session.php");

    $error = '';
    $success = '';
    $response = array();
    $promote_id=$_POST['id'];
    $id = isset($_REQUEST['id'])?trim($_REQUEST['id']):'';

    if($id){
        $query = "delete from sellerpromotions where id = '$promote_id'";
        if (!mysqli_query($con,$query))
        {
            die('Error: ' . mysqli_error($con));
        }
        else
        {
            $msg ="<br> 1 record added";
        }
        $success = 'Comment has been deleted successfully.';
    }
    else
        $error = 'Promotions doesn\'t deleted successfully. Please try again later.';       

    $response = array('error' => $error, 'success' => $success, 'id' => $promote_id);
    echo json_encode($response);
    exit(); 
?>

這是我的JS：

function DelPromoteSubmit(id){
    var self = $(this); 
    alert("in delete promote: " + self);
    var dataString = "id=" + id;
    alert(dataString);
    $.ajax({
        url: "SellerPanel/delete_data2.php", 
        type: 'post', 
        dataType: 'json',
        commentId: id, 
        data: dataString,
        success: function(json){                                        
            if (json.error) {
                alert(json.error);
                return false;
            }                       

            $(".product_class_entry_" + this.commentId).remove();
            alert(json.success);
        } // end success function   
    });  
    return false;           
};

我的問題是，我能夠進行ajax調用並從數據庫中刪除數據，但是直到刷新頁面后，它才會從UI中刪除。

請幫忙，因為我堅持了很長時間。

提前致謝！！

Answer 1

問題是因為您的HTML無效-您不能將div作為tbody的直接子代。 div出現在表格的外部，因此將其刪除時沒有任何作用。

如果您更改HTML，以便將id和class放在tr元素上，則應該可以正常工作：

<?php 
    $query1 = mysqli_query($con,"...some query here...");
    while ($row = mysqli_fetch_array($query1))
    {
        // ...some data fetched from DB here... ?>
        <tr id="product_entry_<?php echo $id?>" class="product_class_entry_<?php echo $id?>">
            <td><font size=2px><?php echo $date?></font></td>
            <td><font size=2px><?php echo $ProductName?></font></td>
            <td><font size=2px><?php echo $Category.' / '.$SubCategory?></font></td>
            <td><font size=2px><?php echo $MRP.' / '.$Price?></font></td>
            <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DirectPromoteSubmit(<?php echo $id?>)">Promote</button></td>
            <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="RePromoteSubmit(<?php echo $id?>)">Edit</button></td>
            <td><button type="submit" class="btn btn-primary btn-xs" style="padding:2px 2px;font-size: 9px;line-height: 10px;" onClick="DelPromoteSubmit(<?php echo $id?>)">X</button></td>
        </tr>
    <?php } 
?>

Answer 2

更換

$(".product_class_entry_"+this.commentId).remove();

通過

$(".product_class_entry_"+id).remove();

說明：

this.commentId沒有任何意義。

您可能會從AJAX請求中引用它。

但是，我們將其作為函數參數，因此，與其使其復雜，不如簡單地使用id 。

Answer 3

嘗試這個：

$("#product_class_entry_"+json.id).remove(); //id from ajax

要么 ：

 $("#product_class_entry_"+id).remove(); //id from the function