Bootstrap modal to confirm table row delete

html, javascript, jquery, twitter-bootstrap

Solution

You have a few things wrong:

Problem 1

An id attribute must be unique, it is used twice in your example.

<button id="btnDelete" href="">delete</button>
<button id="btnDelete" href="">delete</button>

Problem 2

You do not need this code at all, however if you need it in the future use `.on('show.bs.modal', func...)`

$('#myModal').on('show.bs.modal', function () {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
});

Problem 3

`$(this)` here refers to the `btnDelete` button, which does not have a data-id attribute, the `data-id` is set on your `tr`

$('#btnDelete').on('click', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    $('#myModal').data('id', id).modal('show');
});

Working fiddle here with above errors corrected.

Problem

I am very new to web work and I hope I can get some helpful answers here. I am Using bootstraps framework to design a site and I am running into a small issue. I have a table that has a delete button in the last cell and I would like for the button to delete the entire row. I would like for the delete button to activate a bootstrap modal to confirm the table rows deletion before it is deleted. Basically a warning that you are about to delete the entry yes or no. The yes button obviously would delete the row. Here is what I have so far. HTML---- ``` <table> <thead> <tr> <th>Content 1</th> <th>View</th> <th>Content 2</th> <th>Status</th> <th>Edit / View / Delete</th> </tr> </thead> <!-- start: Table Body --> <tbody> <tr class="btnDelete" data-id="1"> <td>Content1</td> <td><a href="#">View</a> </td> <td>Content2</td> <td>Active</td> <td> <button id="btnDelete" href="">delete</button> </td> </tr> <tr class="btnDelete" data-id="2"> <td>Content3</td> <td><a href="#">View</a> </td> <td>Content4</td> <td>Active</td> <td> <button id="btnDelete" href="">delete</button> </td> </tr> </tbody> </table> <!--/table-collapse --> <!-- start: Delete Coupon Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button> <h3 class="modal-title" id="myModalLabel">Warning!</h3> </div> <div class="modal-body"> <h4> Are you sure you want to DELETE?</h4> </div> <!--/modal-body-collapse --> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> </div> <!--/modal-footer-collapse --> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> ``` JS---- ``` $('#myModal').on('show', function () { var id = $(this).data('id'), removeBtn = $(this).find('.danger'); }) $('#btnDelete').on('click', function (e) { e.preventDefault(); var id = $(this).data('id'); $('#myModal').data('id', id).modal('show'); }); $('.btnDelteYes').click(function () { // handle deletion here var id = $('#myModal').data('id'); $('[data-id=' + id + ']').remove(); $('#myModal').modal('hide'); }); ``` Obviously I am using the bootstrap css etc. I hope I have given enough info to help solve my issue. Any help would be greatly appreciated! Here is a Fiddle:

Original source