Jquery fadeOut（）在Ajax中不起作用

I have a .php file that makes a table filled with items found in a database. Here is the while-loop that fills the table:

while($request = $list->fetch(PDO::FETCH_ASSOC)) {
  if(!in_array(array($request['artist'], $request['title']), $arrayList)) {
    echo "<tr id='remove-" . $count . "'>";
    echo "<td class='". $count . "'>" . $count . "</td>";
    echo "<td class='artist'>" . $request['artist'] . "</td>";
    echo "<td class='title'>" . $request['title'] . "</td>";
    echo "<td>" . ShowTime($request['time_created']) . "</td>";
    echo "<td><button type='button' class='btn btn-success played'><span class='ion-play' aria-hidden='true'></span></button></td>";
    echo "<td><button type='button' class='btn btn-danger deletesong'><span class='ion-trash-a' aria-hidden='true'></span></button></td>";
    echo "</tr>";

    $count++;

    $arrayList[$request['id']] = [$request['artist'], $request['title']];
  }
}

When a person clicks on one of the '.played' buttons, an ajax 'POST' request is sent to set a parameter in the database to 1. This is handled by a different script, which is working correctly, because the parameter is set when I click on the button. This is the jQuery file that handles the click on the button:

$('button.played').click(function() {
  var number = $(this).closest( "tr" ).children( ".count" ).html();
  var artist = $(this).closest( "tr" ).children( ".artist" ).html();
  var title = $(this).closest( "tr" ).children( ".title" ).html(); 
  var data = "artist=" + artist + "&title=" + title;
  var trid = "remove-" + number;
  var $parent_tr = $('#'+trid);

  $.ajax({
    type: "POST",
    url: "/assets/scripts/php/played_request.php",
    data: data,
    cache: false,

    success: function() {
      $parent_tr.fadeOut( 1000, function() {
        $(this).remove();
      });
    }
  });
});

The problem is that even though the AJAX is handled successfully (The success block is called), the fadeOut function is not responding, because nothing is fading out. I can't find the problem and this function works in the console.

jQuery(parent_tr).fadeOut( 1000, function() {
  $(this).remove();
});

Can someone please explain to me what I'm doing wrong?

Change your code like:

var $parent_tr = $(this).closest( "tr" );

As I don't see any element with class like count in your HTML.

There are two possibilities:

1. missing count class from tr
2. second change .html() to .text()

Please try to change .html() to .text() and try again :-

    $('button.played').click(function() {
      var number = $(this).closest( "tr" ).children( ".count" ).text();
      var artist = $(this).closest( "tr" ).children( ".artist" ).text();
      var title = $(this).closest( "tr" ).children( ".title" ).text(); 
      var data = "artist=" + artist + "&title=" + title;
      var trid = "remove-" + number;
      var $parent_tr = $('#'+trid);

      $.ajax({
        type: "POST",
        url: "/assets/scripts/php/played_request.php",
        data: data,
        cache: false,

        success: function() {
          $parent_tr.fadeOut( 1000, function() {
            $(this).remove();
        });
      }
    });