title: How to remove a bootstrap modal that's been inserted via jQuery?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="span4 device"&gt;
          &lt;div class="inner"&gt;
              &lt;h3&gt;Device 4&lt;/h3&gt;
              &lt;div class="device-product"&gt;
                  &lt;img class="device-image" src="img/placeholder-holding-image.png" alt="Holding Image" /&gt;
                  &lt;a href="#" class="hide"&gt;Troubleshoot this item&lt;/a&gt;
                  &lt;a href="#" class="hide"&gt;How to use this product&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="device-details"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label"&gt;Device Type:&lt;/label&gt;
                      &lt;span class="field"&gt;Really cool device&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;!-- Small amount of hidden additional information --&gt;
                  &lt;div class="control-group hide"&gt;
                      &lt;label class="control-label"&gt;Device ID:&lt;/label&gt;
                      &lt;span class="field"&gt;123456&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var customModal = $(
      '&lt;div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"&gt; \ 
          &lt;div class="modal-header"&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;&lt;/div&gt; \
          &lt;div class="modal-body"&gt;&lt;/div&gt; \
          &lt;div class="modal-footer"&gt;&lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;&lt;/div&gt; \
      &lt;/div&gt;'
  );
  
  $('.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();
  });
  </code></pre>
  
  <p>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!</p>