ajax刪除按鈕從數據庫中刪除，但我必須重新加載頁面才能看到更改？

Question

第一頁

<script> 
    $(document).ready(function(){   
    $(".delete_buttom").click(function(){ 
    var x = $(this).attr('id'); 
    click_delete(x); 
    }); 

    function click_delete(x){ 
    var commentId = x; 
    $.post("ajax_comments3.php", 
    { 
     task : "this is the task", 
     commentId : commentId 
    } 
    ).success( 
     function(data){ 
      $('.li_style').remove(data); 
     } 
    ).error(function(){ 
     alert("404 not found"); 
     }); 
} 
</script> 

在HTML代碼中，我用PHP來從數據庫中獲取數據

第二頁

<?php 
$host_name = "localhost"; 
$database_user = "root"; 
$password = ""; 
$database_name = "comments"; 
if(isset($_POST["task"]) && $_POST["task"] == "this is the task"){ 
    $commentId = $_POST["commentId"]; 
    $connection = mysqli_connect($host_name,$database_user,$password,$database_name) 
     or die("connection failed"); 
    $delete_query = "delete from comment where comment_id = $commentId "; 
    $excute_delete = mysqli_query($connection,$delete_query) or die("delete query error"); 
} 
?> 

01 HTML代碼

<ul class="ul_style">     
<?php while($row = mysqli_fetch_array($excute_select)){ 

if(!empty($row['commet_text'])) { ?> 

    <li class="li_style" > 

    <img src="profile.jpg" class="user_img_src" /> 

    <h5 class="username"><?php echo "mohamed daif" ;?></h5> 

    <div class="delete_buttom" id="<?php echo $row['comment_id'] ; ?>">X</div> 

    <div class="user_comment"><?php echo $row['commet_text'] ; ?> </div> 

    </li> 

    <?php } 

    } ?>  

</ul>  

它工作正常，並從數據庫中刪除，但在瀏覽器中，當我點擊刪除按鈕，它可以隱藏所有的其他意見，直到我重新加載頁面看到的變化

如果我的問題任何事情不清楚，讓我知道你們

Answer 1

ID標籤添加到您的列表元素像

<li id="comment_<?php echo $row['comment_id'] ; ?>" class="li_style" > 

然後改變你的腳本：

<script> 
    $(document).ready(function(){   
    $(".delete_buttom").click(function(){ 
    var x = $(this).attr('id'); 
    click_delete(x); 
    }); 

    function click_delete(commentId){ 
    $.post("ajax_comments3.php", 
    { 
     task : "this is the task", 
     commentId : commentId 
    } 
    ).success( 
     function(data){ 
      $('#comment_' + commentId).remove(); 
     } 
    ).error(function(){ 
     alert("404 not found"); 
     }); 
} 
</script>