Table does not disappear when calling AJAX

Question

I am trying to delete this table on successful deletion from an AJAX call in PHP.

Below is the function,

list.php

<script type="text/javascript">
    function massDelete()
    {
        if (!confirm("Are you sure"))
        {
            return false;
        }
        else
        {
            var selecedids = $("#selectedids").val();
            {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (xhttp.readyState == 4 && xhttp.status == 200) {
                        document.getElementById("success").innerHTML = xhttp.responseText;
                    }
                };
                xhttp.open("GET", "ajax_delete.php?massDelete=" + selectedids.value, true);
                xhttp.send();
            }
        }
        return false;
    }
</script>

the above code successfully gives me the selected id to delete

on this side of php which is in another file

ajax_delete.php

<?php

if (!empty($_REQUEST['massDelete'])) {

    $selectId = $_REQUEST['massDelete'];
    $finalId = ltrim($selectId, ",");

    $sql = mysql_query("delete from contact_form where contactUser_id in ($finalId)", $con);
    if ($sql) {
        // echo '<script>';
        //echo 'var parent = document.getElementById("fullTable")';
        //echo 'element.remove(parent)';
        //echo '</script>';
        echo "sucess deleted";
    } else {
        echo "Please select a Contact to delete";
    }
}
?>

The answer gives me a successful message, but somewhere I want to disappear in the table below in the table

list.php

<?php

echo '<table id="fullTable">';
echo "<tr><td> ";
echo '<input type="checkbox" name="checkAll" id="checkAll"/></td>';
echo '<td colspan="8" align="right">';
echo '<button type="submit" onClick="return massDelete()" name="delete" class="deleteall" id="deleted">Delete All</button></td>';
echo "</tr>
<tr>
<th></th>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>EMAIL</th>
<th>PHONE</th>
<th>FAX</th>
<th></th>
<th></th>
<th></th>
</tr>";
while ($row = mysql_fetch_array($results)) {
    echo '<div id="checkboxlist">';
    echo '<tr class="show">';
    echo '<td><input name="checkbox[]" type="checkbox" class="checkbox1" value="' . $row['contactUser_id'] . '" id="Checkbox1"></td>';
    echo '<td>' . $row['first_name'] . '</td>';
    echo '<td>' . $row['last_name'] . '</td>';
    echo '<td>' . $row['email'] . '</td>';
    echo '<td>' . $row['phone'] . '</th>';
    echo '<td>' . $row['fax'] . '</td>';
    echo '<td><a href="addedit.php?id=' . $row['contactUser_id'] . '">Edit</a></td>';
    echo '<td><a class="delete" href="#" id="' . $row['contactUser_id'] . '">Delete</a></td>';
    echo '<td><a href="view.php?id=' . $row['contactUser_id'] . '" target="_blank">View</a></td>';
    echo '</div>';
}

} else {
    echo '<td colspan="9"><h1>No contacts found.</td></h1>';
}
?>

I am confused by what I have to do so that if one line is deleted, but only this line disappears,

but if all the checkboxes are selected for deletion than upon successful completion, the entire table should disappear.

Answer 1

, , php , .

, , , . console.log() xhttp.responseText, , , ( dom).

Answer 2

, . javascript . :

var deletedRow = $('#fullTable');
$.post('script.php', {data:data}, function(){
    if(data == "success"){
        deletedRow.remove(); //This will remove the row from the view
    }
});

Ajax , , , , javascript, . , , , .

UPDATE. jQuery, javascript. , , javascript, , ​​ .

Answer 3

, JQuery

, AJAX, ,

massDelete()        {

     var element = $(this);
     var selecedids = $("#selectedids").val();
     var info = 'massDelete=' + selectedids.value;
     if(confirm("Are you sure you want to delete this?"))
     {
      $.ajax({
        type: "POST",
        url: "ajax_delete.php",
        data: info,
        success: function(){
      }
     });
     $this.parent("#fullTable").load("list.php");

      }
     return false;
     }

$this.parent("#fullTable").load("list.php"); , , .