Hiding table row based on incremental php variable attached to the row - php

Question

How can I hide a particular <tr> based on php variable associated with that <tr>(incremental variable $i) with jQuery when the table is being populated dynamically through Mysql. I have looked around but not getting any clue.
<table id="example">
<thead>
<tr>
<th>S.No.</th>
<th>Item Number</th>
<th>Question</th>
<th>Option-A</th>
<th>Option-B</th>
<th>Option-C</th>
<th>Option-D</th>
<th style="text-align: center;">Correct Ans.</th>
<th style="text-align: center;">Marks</th>
<th style="text-align: center;">Action</th>
</tr>
</thead>
<tbody>
<?php
if ($query != '') {
$res = mysql_query($query) ;
$i = 1;
while($row = mysql_fetch_array($res))
{
extract($row);
?>
<tr class="record">
<td><?php echo $i ; ?></td>
<td><?php echo $item_no ; ?></td>
<td><?php echo $level_id ; ?></td>
<td><textarea disabled name="question" rows="4" cols="35"><?php echo $question ; ?></textarea></td>
<td><?php echo $option_A ; ?></td>
<td><?php echo $option_B ; ?></td>
<td><?php echo $option_C ; ?></td>
<td><?php echo $option_D ; ?></td>
<td><?php echo $correct_ans ; ?></td>
<td><?php echo $marks ; ?></td>
<td> </td>
<script type="text/javascript" >
$(function() {
$(".delbutton").click(function() {
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
var $tr = $(this).closest('tr');
if (confirm("Sure you want to delete this post? This cannot be undone later.")) {
$.ajax({
type : "POST",
url : "delete_entry.php", //URL to the delete php script
data: info,
success : function(response) {
if(response=='deletion success'){
$tr.find('td').fadeOut(1000,function(){ $tr.remove(); });
}
}
});
}
return false;
});
});
</script>
</tr>
<?php $i++; } }
</tbody>
</table>
And my ajax page,
<?php
header('Content-Type: application/json');
session_start();
require("../config.php");
require("../Database.class.php");
require("../site.php");
$db = new Database(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
$fnc=new site_functions($db);
$id = $_POST['id'];
$deleted_date = date("Y-m-d h:i:s");
$deleted_by = $_SESSION['session_admin_id'] ;
$nots = $db->idToField("tbl_ques","notes",$id);
if ($nots == "")
{
$date_string = "last deleted on|".$deleted_date."|" ;
}
else {
$date_string = $nots."last deleted on|".$deleted_date."|" ;
}
$fnc->update_is_not_deleted_for_Pearsonvue("tbl_ques",$id, "$deleted_date", $deleted_by);
$notes_data = array("notes"=>$date_string);
if($db->query_update("tbl_ques", $notes_data, "id=$id")){
http_response_code();
echo json_encode('deletion success');
}else{
http_response_code(204);
}
?>

Answer 1

You are already close - in fact it looks like your code should work on the first click at least. Anyway,
Change line
$tr.find('td').fadeOut(1000,function(){ $tr.remove(); });
to
$('#' + del_id).closest('tr').remove(); });
What this does is find the delete button element in the DOM, then look 'up' the DOM structure to the first TR element, and remove that from the DOM.
It is generally better to rely on simple variables within async callbacks because relying on objects, such as $this or in your case $tr can cause issues where the object pointed to by the $tr variable is not the one you expected.
EDIT: Added the working snippet below to illustrate the technique. If you still have a problem please create a minimal verifiable version as a snippet from your code so that we can pinpoint the issue.
$('.del').on('click', function() {
$(this).closest('tr').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example">
<thead>
<tr>
<th>First name</th>
<th>Second name</th>
<th>Age</th>
<th style="text-align: center;">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>Bloggs</td>
<td>22</td>
<td style="text-align: center;">
<button id='A1' class='del'>Delete</button>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Bloggs</td>
<td>19</td>
<td style="text-align: center;">
<button id='A2' class='del'>Delete</button>
</td>
</tr>
<tr>
<td>Joanne</td>
<td>Bloggs</td>
<td>28</td>
<td style="text-align: center;">
<button id='A3' class='del'>Delete</button>
</td>
</tr>
</tbody>
</table>