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

Question

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(); 



    });



     });

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

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

Sign up