Bootstrap modal pour confirmer la suppression de ligne de table

Je suis très nouveau pour le travail sur le Web et j'espère que je peux obtenir des réponses utiles ici. J'utilise le framework bootstraps pour concevoir un site et je me heurte à un petit problème. J'ai une table qui a un bouton de suppression dans la dernière cellule et j'aimerais que le bouton supprime la ligne entière. J'aimerais que le bouton de suppression active un mode bootstrap pour confirmer la suppression des lignes de table avant qu'il ne soit supprimé. Fondamentalement, un avertissement que vous allez supprimer l'entrée oui ou non. Le bouton yes évidemment supprimerait la ligne. Voici ce que j'ai jusqu'ici.

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'); }); 

Évidemment, j'utilise le bootstrap css etc.

• Liste déroulante dynamique Pays / Etat
• Html2Canvas Redimensionner
• Le mot-clé "this" ne semble pas fonctionner
• Le modèle MeteorJS ne présente pas les données, n'apparaît pas
• Existe-t-il un moyen rapide d'obtenir une <option> d'un <select> par valeur, en utilisant JavaScript?

J'espère avoir donné suffisamment d'informations pour résoudre mon problème.

Toute aide sera grandement appréciée!

Voici un violon :

• Désactiver la barre de défilement dans IE
• Comment puis-je faire basculer une Div lorsqu'une image dans cette div est cliquée?
• Détection des lacunes dans la grille des divs
• Dom range.setStart / setEnd
• Comment puis-je obtenir le contenu d'un formulaireData?

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

 $('#myModal').on('show.bs.modal', 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'); });