title: Bootstrap modal to confirm table row delete
body: <p>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.</p>
  
  <p>HTML----</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Content 1&lt;/th&gt;
          &lt;th&gt;View&lt;/th&gt;
          &lt;th&gt;Content 2&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
          &lt;th&gt;Edit / View / Delete&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;!-- start: Table Body --&gt;
  &lt;tbody&gt;
      &lt;tr class="btnDelete" data-id="1"&gt;
          &lt;td&gt;Content1&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;View&lt;/a&gt;
          &lt;/td&gt;
          &lt;td&gt;Content2&lt;/td&gt;
          &lt;td&gt;Active&lt;/td&gt;
          &lt;td&gt;
              &lt;button id="btnDelete" href=""&gt;delete&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="btnDelete" data-id="2"&gt;
          &lt;td&gt;Content3&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;View&lt;/a&gt;
          &lt;/td&gt;
          &lt;td&gt;Content4&lt;/td&gt;
          &lt;td&gt;Active&lt;/td&gt;
          &lt;td&gt;
              &lt;button id="btnDelete" href=""&gt;delete&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
   &lt;!--/table-collapse --&gt;
   &lt;!-- start: Delete Coupon Modal --&gt;
   &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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;&amp;times;&lt;/button&gt;
               &lt;h3 class="modal-title" id="myModalLabel"&gt;Warning!&lt;/h3&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
               &lt;h4&gt; Are you sure you want to DELETE?&lt;/h4&gt;
  
          &lt;/div&gt;
          &lt;!--/modal-body-collapse --&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-danger" id="btnDelteYes" href="#"&gt;Yes&lt;/button&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
          &lt;/div&gt;
          &lt;!--/modal-footer-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>JS----</p>
  
  <pre><code>      $('#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');
    });
  </code></pre>
  
  <p>Obviously I am using the bootstrap css etc.</p>
  
  <p>I hope I have given enough info to help solve my issue.</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Here is a <a href="http://jsfiddle.net/jbash/Se52D/4/" rel="noreferrer">Fiddle</a>:</p>