title: AJAX call runs MySQL delete query fine but doesn't hide table row deleted from page
body: <p>I have a script which runs an AJAX call to delete a specified row from a table of data. The query runs fine and the record is deleted from the database but I can't get the row in the table the user is browsing when they click the delete button to hide. I think I remember that <code>jQuery</code> has issues with <code>td/tr</code> and this is perhaps it, but even after trying to put each table row inside its own div to make reference to I've still had no luck.</p>
  
  <p>The ajax request:</p>
  
  <pre><code>$(document).ready(function() {
      //##### Send delete Ajax request to response.php #########
      //$("body").on("click", "#responds .del_button", function(e) {
          $("body").on("click", ".del_button", function(e) {
           e.returnValue = false;
           var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
           var DbNumberID = clickedID[1]; //and get number from array
           var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
  
              jQuery.ajax({
              type: "POST", // HTTP method POST or GET
              url: "ajax/education_response.php", //Where to make Ajax calls
              dataType:"text", // Data type, HTML, json etc.
              data:myData, //Form variables
              success:function(response){
                  //on success, hide  element user wants to delete.
                  $('#item_'+DbNumberID).fadeOut("slow");
              },
              error:function (xhr, ajaxOptions, thrownError){
                  //On error, we alert user
                  alert(thrownError);
              }
              });
      });
      $('html, body').stop();
  
  });
  </code></pre>
  
  <p>And the structure I am playing around with to populate the table (I know it's a mess with the <code>divs</code> for each row but as I say I'm sure I remember <code>jQuery</code> doesn't like <code>tr/td</code>. I've used this ajax call on other pages and the <code>fadeout()</code> works correctly in all other cases, so sure it must be because I'm trying to remove individual rows from the front end table.</p>
  
  <pre><code>&lt;?php
  while ($row = mysqli_fetch_assoc($result)) {
      $catid = $row['id'];
      $catsector = $row['job_sector'];
      $cattype = $row['job_type'];
      $catname = $row['job_name'];
      echo "&lt;div id=item_".$catid."&gt;";
      echo "&lt;tr class=''&gt;";
      echo "&lt;td&gt;$catsector&lt;/td&gt;";
      echo "&lt;td&gt;$cattype&lt;/td&gt;";
      echo "&lt;td&gt;$catname&lt;/td&gt;";
      echo "&lt;td&gt;&lt;a href='#' class='del_button' id='del-". $catid ."'&gt;Delete CV&lt;/a&gt;&lt;/td&gt;";
      echo "&lt;/tr&gt;";           
      echo "&lt;/div&gt;";
  }
  ?&gt;
  </code></pre>