title: Delete row from table after button clicked
body: <p>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.</p>
  
  <p>I tried doing </p>
  
  <pre><code>$(this).closest('tr').remove();
  </code></pre>
  
  <p>But it's not working. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script
   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .hidden {
   display: none;
  }
  &lt;/style&gt;
  &lt;title&gt;Form&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"&gt;
   &lt;div class="container"&gt;
    &lt;div class="panel"&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
       &lt;table id="mytable" class="table"&gt;
        &lt;thead&gt;
         &lt;tr&gt;
          &lt;th class="text-center"&gt;ID&lt;/th&gt;
          &lt;th class="text-center"&gt;Name&lt;/th&gt;
          &lt;th class="text-center"&gt;Delete&lt;/th&gt;
         &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
         &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;John&lt;/td&gt;
          &lt;td class="text-center"&gt;&lt;p data-placement="top"
            data-toggle="tooltip" title="Delete"&gt;
            &lt;button class="btn btn-danger btn-xs deletebtn"
             data-title="Delete" data-toggle="modal"
             data-target="#deletemodal"&gt;
             &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
            &lt;/button&gt;
           &lt;/p&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;Mary&lt;/td&gt;
          &lt;td class="text-center"&gt;&lt;p data-placement="top"
            data-toggle="tooltip" title="Delete"&gt;
            &lt;button class="btn btn-danger btn-xs deletebtn"
             data-title="Delete" data-toggle="modal"
             data-target="#deletemodal"&gt;
             &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
            &lt;/button&gt;
           &lt;/p&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;Jane&lt;/td&gt;
          &lt;td class="text-center"&gt;&lt;p data-placement="top"
            data-toggle="tooltip" title="Delete"&gt;
            &lt;button class="btn btn-danger btn-xs deletebtn"
             data-title="Delete" data-toggle="modal"
             data-target="#deletemodal"&gt;
             &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;
            &lt;/button&gt;
           &lt;/p&gt;&lt;/td&gt;
         &lt;/tr&gt;
        &lt;/tbody&gt;
       &lt;/table&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="modal fade" id="deletemodal" tabindex="-1" role="dialog"
    aria-labelledby="delete" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
     &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
       &lt;button type="button" class="close" data-dismiss="modal"
        aria-hidden="true"&gt;
        &lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;
       &lt;/button&gt;
       &lt;h4 class="modal-title custom_align" id="Heading"&gt;Delete this
        entry&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
  
       &lt;div class="alert alert-danger"&gt;
        &lt;span class="glyphicon glyphicon-warning-sign"&gt;&lt;/span&gt; Are you
        sure you want to delete this Record?
       &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="modal-footer "&gt;
       &lt;button type="button" class="btn btn-success" id="confirmdeletebtn"&gt;
        &lt;span class="glyphicon glyphicon-ok-sign"&gt;&lt;/span&gt; Yes
       &lt;/button&gt;
       &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;
        &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; No
       &lt;/button&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
     $("#confirmdeletebtn").click(function() {
      alert("in delete btn");
      $(this).closest('tr').remove();
  
     });
    });
   &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>