How to remove a boot mod that was inserted via jQuery?

Question

I decided that I wanted to have a script that I could use if I needed to insert custom Bootstrap modalities. I did not want the empty static loading modal HTML to sit at the bottom of each page, if it had not always been used.

So this may not be the right way around this, but it was my attempt. I am creating a variable that is a modal html "shell". Then, when I click on a device element, it is added to the body. I have some content that is then cloned and added to the header and body of the modal. Everything is working fine. But I cannot delete the modal form after it is closed. This is because I embed HTML through JS, since deleting works fine if the HTML code of the modal shell exists statically on 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 this is just remove () that I am struggling with. But also any comments that I am doing it wrong or ineffectively are always useful for learning!

Answer 1

You are trying to bind an event handler for the hidden event before the .custom-modal div is added to the DOM, so the event handler is never associated with anything.

You can do this in two ways.

• Pass the hidden event handler so that the document always listens for hidden events that come from any element with the custom-modal class:

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

• Bind an event handler after adding a modal div to the DOM:

   $('.device').click(function(){ // Push the modal markup into the DOM $('body').append(customModal); // Now that it 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 is a possibility that several modals will be open.