jQuery + PHP : Deleting rows from a table from multiple ID's

Question

Hey guys. I am somewhat new to jQuery and javascript in general. What I have is a CMS that I am upgrading. In doing so, I have started an option to delete multiple categories at once via checkboxes, which is processed via jquery/ajax.

In deleting the records individually, I could remove the row of the table once deleted, but now with multiple records and checkboxes, I am not quite sure how to handle this. If it helps at all, this is what I am working with (excuse if it's messy, I am not too familiar with JS or jQuery in general)...

// Process deleting multiple categories
 $("#delete_selected").click(function() {  

  $("#delete_loading").fadeIn("slow");
  var bool = confirm('Are you sure you want to delete the selected categories?  This action cannot be undone.');

  if (bool == true) 
  {   
   var formDataString = $("#categoriesForm").serialize(); 

   $.ajax({
    type: "POST",
    url: domain + "/admin/categories/delete_category/",
    data: formDataString,
    cache: false,
    dataType: "html",
    success: function() { 
     $("#delete_loading").fadeOut("slow");
     $('tr#' + id).fadeOut("slow");
     $('tr#' + id + ' td').fadeOut("slow");
    },
    error: function() { 
     $("#delete_loading").fadeOut("slow");
     $('#error').fadeIn("slow"); 
    }
   });
  }
  else { $('#error').show(); }
  return false;
 });

Thanks for any help or thoughts you can offer. As you can see, in the old code I just faded the table rows after processing, but have no idea how to return the ID's to hide from PHP (I am also using Kohana framework).

Answer 1

you can simply get the checked elements inside the table and remove them as the following

$('#tableId :checked').each(function(i, item){
  var $row = $(item).parent('tr:first');
  $row.fadeOut("slow");
  $('td', row).fadeOut("slow"); //i'm not sure why you need to hide tds after hiding the hole row
});

Answer 2

What #categoriesForm is exactly? An input field?

I see you use to serialize it, and if i dont remember wrong, jquery should has a function to transform it into an array.

Then, with a simple .each() you can remove from the dom the rows with .parent('tr:first'); as Barakad suggested.

As a side note, i dont understand why your ajax call has dataType: "html"... what do you expect as a return value? Usually, stuff like that expect to return a boolean value (true for success, false in case of error), or an json message with all the details.. html dataType make me think that you do update the page DOM with the ajax response, am i wrong?