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