Ich möchte eine Zeile mit Fadeout-Effekt löschen funktioniert nicht

Question

Ich habe eine Tabelle mit Daten Ich möchte eine Zeile löschen, wenn eine Schaltfläche zum Löschen klicken Ich habe eine Bootstrap-Klasse, um die Tabelle zu entwerfen, bitte helfen und schlagen einen Weg zu tun

es

 <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

Diese Linie ist falsch

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

Sie onClick mit einem 0 geschrieben haben. Ändern Sie ihn auf:

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

Sie müssen auch eine ID auf Ihrer Tabellenzeile platzieren, dass Sie dann an die Funktion übergeben können, damit es die richtige Zeile löschen. Sie können Hintergrundfarbe auch nicht animieren. Siehe unten:

 <?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.