testsfsfsfsdf

1. 22/8/2014 How to remove a bootstrap modal that's been inserted via jQuery? - Stack Overflow
http://stackoverflow.com/questions/16533514/how-to-remove-a-bootstrap-modal-thats-been-inserted-via-jquery 1/3
Take the 2­minute tour ×
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 Bootsrap 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>
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
How to remove a bootstrap modal that's been inserted via jQuery?
sign up
log in
tour
help
careers 2.0

2. 22/8/2014 How to remove a bootstrap modal that's been inserted via jQuery? - Stack Overflow
http://stackoverflow.com/questions/16533514/how-to-remove-a-bootstrap-modal-thats-been-inserted-via-jquery 2/3
davidpauljunior
4,512 1 6 26
1 Answer
thefrontender
1,339 5 16
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 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!
jquery twitter­bootstrap
edited May 14 '13 at 3:53 asked May 14 '13 at 0:59
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.
edited May 14 '13 at 1:30 answered May 14 '13 at 1:25
This is removing the .custom­modal div from the DOM, but I have a separate issue, where when the
modal is triggered again, it still contains the appended content from the previous trigger. – davidpauljunior
May 14 '13 at 1:53
add a comment

3. 22/8/2014 How to remove a bootstrap modal that's been inserted via jQuery? - Stack Overflow
http://stackoverflow.com/questions/16533514/how-to-remove-a-bootstrap-modal-thats-been-inserted-via-jquery 3/3
May 14 '13 at 1:53
You haven't described this 'separate issue' in the question. Do you have a test page or a JSFiddle you can
share? – thefrontender May 14 '13 at 2:51
Sorry for missing this in the question, I assumed that the removal of the modal would remove any attached
appended content. I've also tried this: $(document).on('hidden', '.modal', function () {
$(this).removeData('modal'); }); but to no avail. JSFiddle is here:
jsfiddle.net/davidpauljunior/rMyMy – davidpauljunior May 14 '13 at 4:06
1 Found it: stop wrapping customModal as a jQuery object. Pass it as a string instead. e.g. customModal
= '<div class=...' When you turned it into a jQuery object, it still exists after you take it out of the DOM and
continues to receive amendments. – thefrontender May 14 '13 at 4:22
1 Updated JSFIddle jsfiddle.net/thefrontender/rMyMy/3 Wrapping the markup in jQuery turned it into a DOM
fragment assigned to the customModal variable. Calling remove pulled the elements out of the DOM but
the amended DOM Fragment continued to exist in the variable customModal which would get amended to
the DOM again the next time around, and it's changed contents persisted. – thefrontender May 14 '13 at
4:33
show 1 more comment
Not the answer you're looking for? Browse other questions tagged jquery
twitter­bootstrap or ask your own question.