stackoom
  简体   繁体   中英

Delete row from table after button clicked

 原文  2016-12-28 23:16:47  2   4    javascript/ jquery

Question

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>

4 answers

solution1
 4 ACCPTED  2016-12-28 23:28:51

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

solution2
 0  2016-12-28 23:44:03

The bootstrap modal provides the relatedTarget ( the clicked element ) to the shown.bs.modal and show.bs.modal events.

This way you can store the reference and use it when deleting 

 $(document).ready(function() { $('#deletemodal').on('shown.bs.modal', function(e) { // store the clicked element as data on the confirm button $('#confirmdeletebtn').data('triggered-from', e.relatedTarget); }); $("#confirmdeletebtn").click(function() { // retrieve the button that triggered the action and use it var trigger = $(this).data('triggered-from'); $(trigger).closest('tr').remove(); $('#deletemodal').modal('hide'); }); }); 
 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .hidden { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <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> </body>

solution3
 0  2016-12-29 00:03:56

The this keyword there refer to the confirmation button in the modal dialog that has nothing to do with which tr to be deleted. First, you'll have to listen for clicks on a .deletebtn button. This function when fired should show the modal dialog and listens for the click event on the #confirmdeletebtn button. If the user clicks it then you should delete the tr that was close the the .deletebtn button that was clicked (thus a reference of it should be saved once it was clicked). 

$(function(){
  var clickedBtn = null;
  $(".deletebtn").click(function(){
    clickedBtn = this;

    // show the modal dialog
  });

  $("#confirmdeletebtn").click(function(){
    if(clickedBtn){ // make sure we have assigned a reference
      $(clickedBtn).closest("tr").remove();
      clickedBtn = null; // not necessary

      // close the modal dialog.
    }
  });

  // add listeners for the close and abort buttons of the modal dialog if not already handeled by bootstrap or whatever you're using.
});

solution4
 -1  2016-12-28 23:28:10

enter code here function DeleteRows() { alert("in delete btn"); $(this).closest('li').remove(); };

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JQuery - Delete table row if delete button is clicked How to get row value from table when delete button is clicked? How to delete a db row after cancel button is clicked Remove table row after clicking table row delete button Color table row if button clicked Delete row from table on corresponding delete button click How do you remove a parent table row when child "delete" button is clicked in React JS? delete row(s) from ng-grid table from button Delete Output After Button is Clicked in JavaScript Add/Delete table row with button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM