document.write("
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Adding and removing a class using jQuery</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/***ENTER YOUR CODE***.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function(){ $('.fa-trash-alt').click(function(e){ e.preventDefault(); var row = $(this).closest('tr'); row.addClass("bg-danger"); row.hide(2000, function(){ this.remove(); }); }); }); </script> </head> <body> <div class="container"> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bob</td> <td><a href=""><i class="fas fa-trash-alt"></i></a></td> </tr> <tr> <td>2</td> <td>Sally</td> <td><a href=""><i class="fas fa-trash-alt"></i></a></td> </tr> </tbody> </table> </div> </body> </html>