How to remove a bootstrap modal that's been inserted via jQuery? -

i decided wanted have script use if needed insert custom bootstrap modals. didn't want have empty static bootstrap modal html sat in bottom of every page if wouldn't utilized.

so, may wrong way of going it, attempt. create variable modal 'shell' html. then, when click device item, appended body. have content cloned , appended header , body of modal. working fine. can't remove modal once it's closed. fact insert html via js, remove works fine if modal shell html exists statically in html page.

html:

<ul>     <li class="span4 device">         <div class="inner">             <h3>device 4</h3>             <div class="device-product">                 <img class="device-image" src="img/placeholder-holding-image.png" alt="holding image" />                 <a href="#" class="hide">troubleshoot item</a>                 <a href="#" class="hide">how use product</a>             </div>             <div class="device-details">                 <div class="control-group">                     <label class="control-label">device type:</label>                     <span class="field">really cool device</span>                 </div>                 <!-- small amount of hidden additional information -->                 <div class="control-group hide">                     <label class="control-label">device id:</label>                     <span class="field">123456</span>                 </div>             </div>         </div>     </li> </ul> 

jquery:

var custommodal = $(     '<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> \          <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div> \         <div class="modal-body"></div> \         <div class="modal-footer"><button class="btn" data-dismiss="modal">close</button></div> \     </div>' );  $('.device').click(function(){     $('body').append(custommodal);     $(this).find($('h3')).clone().appendto('.custom-modal .modal-header');     $(this).find('.device-product, .device-details').clone().appendto('.custom-modal .modal-body');     $('.custom-modal.hide').show();     $('.custom-modal').modal(); });   $('.custom-modal').on('hidden', function(){     $(this).remove(); }); 

so it's remove() i'm struggling with. also, comments on whether i'm going in wrong / inefficient way helpful learning!

you're attempting bind event handler hidden event before .custom-modal div added dom, event handler never bound anything.

you can 2 ways.

1. delegate hidden event handler document listening hidden events originating element class of custom-modal:

   $(document).on('hidden', '.custom-modal', function () {     $(this).remove(); }); 

2. bind event handler after you've added modal div dom:

   $('.device').click(function(){     // push modal markup dom     $('body').append(custommodal);      // it's in dom can find , bind event handler     $('.custom-modal').on('hidden', function () {         $(this).remove();     });      // continue other init tasks     $(this).find('h3').clone().appendto('.custom-modal .modal-header');     $(this).find('.device-product, .device-details').clone().appendto('.custom-modal .modal-body');     $('.custom-modal.hide').show();     $('.custom-modal').modal(); }); 

option 1 preferable, if there's chance multiple modals opened.