Ajax call not deleting div

Question

I have a php page where section is having a table. I have provided a delete button so that entry can be deleted after clicking on it. I make an Ajax call to delete the data from DB and then from UI.

Here is part of my php page:

<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>

Here is my AJAX code:

<?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(); 
?>

and here is my 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;           
};

My issue is that i am able to make ajax call and delete the data from DB but it is not removed from the UI untill i refresh the page.

Please help as i am stuck with this for a very long time.

Thanks in advance!!

Answer 1

The problem is because your HTML is invalid - you cannot have a div as a direct child of a tbody . The div is appearing outside the table, so when you remove it, it has no effect.

If you change your HTML so that the id and class are placed on the tr element instead, it should work fine:

<?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

Replace

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

By

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

Explanation:

this.commentId does not make any sense.

You might be referring it from the AJAX request.

But, we have it as function argument, so, rather than making it complex, simply use id .

Answer 3

try this:

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

or :

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