title: Bootstrap with jQuery - Delete this button's parent with Modal confirmation
body: <p>I am using Bootstrap.</p>
  
  <p>I have 4 different boxes with same class with delete link inside it.</p>
  
  <p>If I click on Delete link, it should open confirmation Modal dialog with message, and by confirming it should delete the parent box of clicked element.</p>
  
  <p>I can able to delete only this Link not parent. (Thanks to Bootply :) )</p>
  
  <blockquote>
    <p><strong><a href="http://www.bootply.com/qndZ0KmkRL" rel="nofollow">Online Demo</a></strong></p>
  </blockquote>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;&lt;h1&gt;Heading 1&lt;/h1&gt;&lt;a href="#" class="confirm-delete" data-id="1"&gt;Delete&lt;/a&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;h1&gt;Heading 2&lt;/h1&gt;&lt;a href="#" class="confirm-delete" data-id="2"&gt;Delete&lt;/a&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;h1&gt;Heading 3&lt;/h1&gt;&lt;a href="#" class="confirm-delete" data-id="3"&gt;Delete&lt;/a&gt;&lt;/div&gt;
    &lt;div class="box"&gt;&lt;h1&gt;Heading 4&lt;/h1&gt;&lt;a href="#" class="confirm-delete" data-id="4"&gt;Delete&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="myModal" class="modal hide"&gt;
    &lt;div class="modal-header"&gt;
      &lt;a href="#" data-dismiss="modal" aria-hidden="true" class="close"&gt;×&lt;/a&gt;
      &lt;h3&gt;Delete&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;You are about to delete.&lt;/p&gt;
      &lt;p&gt;Do you want to proceed?&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;a href="#" id="btnYes" class="btn danger"&gt;Yes&lt;/a&gt;
      &lt;a href="#" data-dismiss="modal" aria-hidden="true" class="btn secondary"&gt;No&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('#myModal').on('show', function() {
      var id = $(this).data('id'),
          removeBtn = $(this).find('.danger');
  })
  
  $('.confirm-delete').on('click', function(e) {
      e.preventDefault();
  
      var id = $(this).data('id');
      $('#myModal').data('id', id).modal('show');
  });
  
  $('#btnYes').click(function() {
      // handle deletion here
      var id = $('#myModal').data('id');
      $('[data-id='+id+']').remove();
      $('#myModal').modal('hide');
  });
  </code></pre>