Menu
I have a delete button in every row of my table. when the user clicks on the delete button, a modal will pop out prompting the user "Are you sure you want to delete this Record?". If the user clicks yes, the row will be deleted from the table.
I tried doing
$(this).closest('tr').remove();
But it's not working.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Form</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="panel">
<div class="row">
<div class="col-md-12">
<table id="mytable" class="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
<tr>
<td>3</td>
<td>Jane</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog"
aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" id="confirmdeletebtn">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#confirmdeletebtn").click(function() {
alert("in delete btn");
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
575
asked Apr 17 '26 08:04
One way would be to toggle a selected class on the row when the delete button in the row is clicked ...then remove the row with that class with the modal button
$('.deletebtn').click(function(){
// remove selected class from other rows
$('tr.selected').removeClass('selected');
// add selected class to current row
$(this).closest('tr').addClass('selected');
});
$("#confirmdeletebtn").click(function() {
$('tr.selected').remove();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
