<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="table" width="100%" style="width:100%;"> <table id="tableone"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Last Name</th> <th>Profile</th> <th>Profile Image</th> <th>Edit Profile</th> </tr> </thead> <tbody> <tr> <td>1</td> <td contenteditable="false">Johan</td> <td contenteditable="false">Johan Last</td> <td contenteditable="false">Profile</td> <td class= "text-center"><span class="user_profile_img"> <img src="https://tryitfreeapp.com/wp-content/uploads/2019/11/aboutUsImg.jpeg" class="rounded-circle" alt="User profile image" height="30px" width="30px"/> </span></td> <td class= "text-center"> <a href="javascript:void(0)" id="edit" class="btn"><i class="fa fa-edit"></i></a> <a href="javascript:void(0)" id="delete" class="btn"><i class="fa fa-trash" aria-hidden="true"></i></a> </td> </tr> </tbody> </table> </div> </div> </div> </div>

.fa-trash{color: red;} .btn:hover{cursor : pointer;}

$(document).ready(function () { $('#edit').click(function () { var currentTD = $(this).parents('tr').find('td'); if ($(this).html() == '<i class="fa fa-edit"></i>') { $.each(currentTD, function () { $(this).prop('contenteditable', true) }); } else { $.each(currentTD, function () { $(this).prop('contenteditable', false) }); } $(this).html($(this).html() == '<i class="fa fa-edit"></i>' ? '<i class="fa fa-save" aria-hidden="true" style="color: green;"></i>' : '<i class="fa fa-edit"></i>') }); $("#tableone").on('click', '#delete', function () { $(this).closest('tr').remove(); }); });