3

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>
user2313232
  • 77
  • 1
  • 8
  • How are you loading the data into the table or is it just static? – haakon.io Dec 28 '16 at 23:18
  • yes the data is static – user2313232 Dec 28 '16 at 23:23
  • Possible duplicate of [Remove table row after clicking table row delete button](http://stackoverflow.com/questions/11553768/remove-table-row-after-clicking-table-row-delete-button) – Banzay Dec 28 '16 at 23:31
  • Once you load the modal the original click event is lost. You want to save the location of that original click event and access it in your modal code when user confirms the delete. Your javascript as of now is limited to modal window. – spooky Dec 28 '16 at 23:33

4 Answers4

4

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();
});
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

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>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

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.
});
ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
-1

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

jay Patel
  • 1
  • 1