Gerle Batde Gerle Batde - 2 years ago 185
jQuery Question

How to delete the entire panel block if 'yes' is clicked via bootstrap modal?

I am attempting to delete everything that is wrapped within a class div 'panel-default' and everything associated to the IDs. I was able to delete it without modal popup but now the modal is added, it is not doing what I wanted it to do.

HEre is the jsfiddle:

https://jsfiddle.net/Gereltuya/fd8bsfo4/10/

$('.panel-default').on('click','.btn-delete',function(){ groupID='#'+$(this).closest('div').attr('id');

$("#mi-modal").modal('show');

$("#modal-btn-yes").on("click", function(){

$("#mi-modal").modal('hide');

$(this).closest('div').attr('id').closest('.panel-default').remove();

});

});

Answer Source

This seems to work

$('.panel-default').on('click', '.btn-delete', function() {
  groupID = '#' + $(this).closest('div').attr('id');
  var $delBtn = $(this);
  $("#mi-modal").modal('show');

  $("#modal-btn-yes").on("click", function() {

    $("#mi-modal").modal('hide');
    $delBtn.closest('.panel-default').remove();

  });

});

When the delete button is clicked you save a reference to it. Later when yes is clicked you can find its closest parent with 'panel-default' and remove it

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download