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

Question

I decided I wanted to have a script that I could use if I needed to insert custom Bootstrap modals. I didn't want to have the empty static Bootstrap modal HTML sat in the bottom of every page if it wouldn't always be utilized.

So, this may be the wrong way of going about it, but this was my attempt. I create a variable which is the modal 'shell' html. Then, when I click a device item, this is appended to the body. I have some content then cloned and appended to header and body of the modal. All working fine. But I can't remove the modal once it's closed. This is something to do with the fact that I insert the HTML via JS, as the remove works fine if the Modal shell HTML exists statically in my 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 this item</a>
                <a href="#" class="hide">How to use this 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 really it's just the remove() I'm struggling with. But also, any comments on whether I'm going about this in a wrong / inefficient way are always helpful for learning!

Answer 1

You're attempting to bind the event handler for the hidden event before the .custom-modal div is added to the DOM, so the event handler is never bound to anything.

You can do this two ways.

1. Delegate the hidden event handler so that the document is always listening for hidden events originating from any element with a class of custom-modal:

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

2. Bind the event handler after you've added the modal div to the DOM:

   $('.device').click(function(){
       // Push the modal markup into the DOM
       $('body').append(customModal);
   
       // Now that it's in the DOM we can find it and bind an event handler
       $('.custom-modal').on('hidden', function () {
           $(this).remove();
       });
   
       // Continue with 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 is preferable, especially if there's a chance that multiple modals will be opened.