フェードアウト効果が働いていない行を削除したい

Question

私はデータを表示しているテーブルを持っています削除ボタンをクリックすると行を削除したい 私はテーブルをデザインするためのブートストラップクラスを持っています。それ

 <code><?php 
     while ($query = $qry->fetch_object()) { 
        ?>  
        <tr><td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo echo $query->Sumthing; ?></td> 
         <td> <button type="button" class="btn btn-sm btn-danger" 0nClick="deleteReminder(<?php print($query->id);?>)" > 
</td> 
</tr> 
<script> 
     function deleteReminder(remId) { 
     if (confirm("Are you sure?")) { 

       $.ajax({ 
       type: "POST", 
       url: "sumthing.php", 
       data: "remId="+remId, 
      success: function(result){ 
       console.log(result); 
       } 
      }); 

      $(this).animate({ backgroundColor: "#fbc7c7" }, "fast") 
     .animate({ opacity: "hide" }, "slow") 

      } 
      return false; 
     } 
     </script> 
</code> 

Answer 1

この行は、あなたが0とのonClickを綴られている

<td> <button type="button" class="btn btn-sm btn-danger" 0nClick="deleteReminder(<?php print($query->id);?>)" > 

間違っています。それを変更します。

<td> <button type="button" class="btn btn-sm btn-danger" onClick="deleteReminder(<?php print($query->id);?>)" > 

また、それが正しい行を削除しますので、あなたは、関数に渡すことができ、あなたのテーブルの行のIDを配置する必要があります。また、背景色をアニメートすることもできません。下記を参照：

 <?php 
     $i = 0; 
     while ($query = $qry->fetch_object()) { 
      $i = $i + 1; 
        ?>  
        <tr id="rowNum<?php echo $i; ?>"><td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo $query->Sumthing; ?></td> 
         <td><?php echo echo $query->Sumthing; ?></td> 
         <td> <button type="button" class="btn btn-sm btn-danger" onClick="deleteReminder('rowNum<?php echo $i; ?>')" > 
</td> 
</tr> 
<script> 
     function deleteReminder(remId) { 
      if (confirm("Are you sure?")) { 
       $.ajax({ 
        type: "POST", 
        url: "sumthing.php", 
        data: "remId="+remId, 
        success: function(result){ 
         console.log(result); 
        } 
       }); 
      remId = "#"+remId; 
      $(remId).animate({ 
       opacity: 0 
      }, 1000,function(){}); 
     } 
     </script> 

Here's a working jsFiddle