remyremy remyremy - 6 months ago 13
jQuery Question

remove table row after item deleted in database using Jquery

I have a delete button that deletes an entry in the database. I would like to hide the table row of that entry after the deletion but can't find a way to hide the

tr
.

My code is:

$(document).on('click' , 'a.delete-dialog', function(){
var id_hired_staff = $(this).closest('tr').attr('data-id_hired_staff');
$("#dialog-confirm").data('del-id_hired_staff', id_hired_staff).dialog('open');
return false;
});

var buttonsOpts = {}
buttonsOpts[Settings.fire_staff] = function() {
var id_hired_staff = $(this).data('del-id_hired_staff');
$.ajax({
type: "POST",
url: "/path/fire_staff",
data: "id_hired_staff="+id_hired_staff,
success: function(result){
$("tr").find("[data-id_hired_staff='" + id_hired_staff + "']").hide(); // This is what I've tried
}
});
$(this).dialog('close');
}

Answer

I will write my comment as an answer:

 var id_hired_staff;
 $(document).on('click' , 'a.delete-dialog', function(){
    id_hired_staff = $(this).closest('tr').attr('data-id_hired_staff');
  $("#dialog-confirm").data('del-id_hired_staff', id_hired_staff).dialog('open');
  return false;
});

var buttonsOpts = {}
buttonsOpts[Settings.fire_staff] = function() {
  var id_hired_staff = $(this).data('del-id_hired_staff');
  $.ajax({
    type: "POST",
    url: "/path/fire_staff",
    data: "id_hired_staff="+id_hired_staff,
    success: function(result){
      $("table").find("tr[data-id_hired_staff='" + id_hired_staff + "']").hide(); // This is what I've tried
   }
  });
$(this).dialog('close');
}

I put id_hired_staff as a global variable so it will be available outside the click callback function scope. and changed the selector to something I believe will work

Comments