How to remove the DOM elements of a modal on close - semantic-ui

Question

Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: Fomantic-UI provides a modal capability - just call .modal() on a JQuery element et voila. However, when the modal is closed, the DOM elements for the modal element remain hidden in the DOM. My use case requires removal of those elements, but I am concerned about the 'left over' wiring for the modal capability.
Research done: The FUI documentation on modals is useful but is written from the perspective of getting a modal up, but not cleanly taking it down.
Reproduction: The snippet below is a code-based approach to creation of a modal and wiring for the button listeners. Click the button to open the modal, then click the close button. Two seconds later a simple JQuery count of DOM modal elements remaining will be shown - it should be zero but will be 1.
Notes:
1 - FUI modal has a frustrating feature of auto-closing the modal when any button is clicked. It has one saving clause which is that if the triggered button event handler returns false then the modal stays open. Clearly, if you are doing form validation etc, you need to know this. Additionally, if you prefer to override the default feature for all buttons, return false from the onHide function, e.g.
element.modal('setting', 'onHide', function(){ return false; });
element.modal('show');
2 - This snippet is using the the 'dist' versions of FUI. Since FUI changes often, the snippet may fail if there have been breaking changes by the time you see it. At time of writing the official release on jsdelivr cdn is 2.8.3. (Edited 17-Jan-2020).
var fnSpecial = function(){
console.log('Close button click function - return true to hide');
// ... do function activity here....
return true;
}
$('#b1').on('click', function(){
makeModal({
title: 'I be modal',
content: 'Modal be I !',
actions: [
{ text: 'Close', fn: fnSpecial}, // for more buttons in the modal add more entries here.
]
})
})
function makeModal(opts){
// create your modal element - I grab the modal template
var tplt = $('#modalTemplate').html();
// defaults for modal create
var obj = {
title: 'No title !',
content: 'No content',
actions: [
]
}
// Merge the above defaults with the user-supplied options
obj = $.extend(obj, opts);
// Apply modal options to the soon-to-be modal element
var ele = $(tplt);
ele.find('.modalHeading').html(obj.title);
ele.find('.modalBody').html(obj.content);
ele.addClass('modalContentCopy');
var modalButtons = ele.find('.modalButtons');
for (var i =0, max = obj.actions.length; i < max; i = i + 1 ){
var btn = $('<button >' + obj.actions[i].text + '</button>');
var fn = obj.actions[i].fn;
btn.data('fn', fn); // store the callback on the element to avoid closures.
btn.appendTo(modalButtons);
btn.on('click', function(e){
var fn = $(this).data('fn');
if (typeof fn === "function"){
var hide = fn(); // IMPORTANT: the function triggered for the button must return true to close the modal or false to keep it open !
console.log('Button says hide=' + hide)
if (hide){
ele.modal('destroy');
ele.modal('hide');
$('#info')
.html('***');
// wait 2 secs and see if the DOM element has gone
setTimeout( function(){
var num = $('.modalContentCopy').length;
$('#info')
.html(num)
.css({ backgroundColor: (num === 0 ? 'lime' : 'red')});
}, 2000);
}
}
});
}
// Simple example of how to reveal the modal element as a f-ui modal
ele
.appendTo($('body'))
.modal('setting', 'transition', "vertical flip")
.modal('setting', 'onHide', function(){ return false; }) // stop the auto-closing by FUI
.modal('show'); // finally show the modal
}
p {
padding: 10px;
}
.modalContent {
border: 1px solid lime;
margin: 5px;
padding: 5px;
}
.modalHeading {
border: 1px solid cyan;
margin: 5px;
padding: 5px;
}
.modalBody {
border: 1px solid magenta;
margin: 5px;
padding: 5px;
}
.modalContent {
background-color: white;
}
.ipt {
margin: 5px 20px;
display: block;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal, then the 'Close' button to close it. See console for messages. The critical point is the final display of the modal artefact count which appears after a 2 second delay, allowing for transitions to complete. We want a zero - what will it be?
</p>
<p>
<button id='b1'>Show a modal</button> <span>Count of DOM artifacts after close should be zero - value is >>>>> </span><span id='info'>[value will appear here after modal close]</span>
</p>
<div id='modalTemplate' style='display: none;'>
<div class='modalContent'>
<div class='modalHeading'>
I am the heading
</div>
<div class='modalBody'>
I am the body
</div>
<div class='modalButtons'>
</div>
</div>
</div>
</body>

Answer 1

The answer is to use the currently undocumented features of modal('destroy') and modal('remove') after the closing animation completes.
.modal('setting', 'onVisible', function(){
ele
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
console.log('Animation complete')
$(this).off(e); // remove this listener
$(this).modal('destroy'); // take down the modal object
$(this).remove(); // remove the modal element, at last.
});
})
If you do not observe the completion of the closing transition then FUI throws a warning about transitions on missing elements.
Modal.Destroy clears out the modal object that FUI attaches to the JQuery modal element. The ele.remove() is the standard JQuery remove function. The result is, as per my requirement, the element previously made modal is removed from the DOM.
There will be one artefact which is the FUI dimmer div, but my testing to date shows that this is not an issue, meaning they are not visible and do not rack up over time.
See snippet below for working example. Look at the end of the JS section for the solution.
var fnSpecial = function(){
console.log('Close button click function - return true to hide');
// ... do function activity here....
return true;
}
$('#b1').on('click', function(){
makeModal({
title: 'I be modal',
content: 'Modal be I !',
actions: [
{ text: 'Close', fn: fnSpecial}, // for more buttons in the modal add more entries here.
]
})
})
function makeModal(opts){
// create your modal element - I grab the modal template
var tplt = $('#modalTemplate').html();
// defaults for modal create
var obj = {
title: 'No title !',
content: 'No content',
actions: [
]
}
// Merge the above defaults with the user-supplied options
obj = $.extend(obj, opts);
// Apply modal options to the soon-to-be modal element
var ele = $(tplt);
ele.find('.modalHeading').html(obj.title);
ele.find('.modalBody').html(obj.content);
ele.addClass('modalContentCopy');
var modalButtons = ele.find('.modalButtons');
for (var i =0, max = obj.actions.length; i < max; i = i + 1 ){
var btn = $('<button >' + obj.actions[i].text + '</button>');
var fn = obj.actions[i].fn;
btn.data('fn', fn); // store the callback on the element to avoid closures.
btn.appendTo(modalButtons);
btn.on('click', function(e){
var fn = $(this).data('fn');
if (typeof fn === "function"){
var hide = fn(); // IMPORTANT: the function triggered for the button must return true to close the modal or false to keep it open !
console.log('Button says hide=' + hide)
if (hide){
ele.modal('destroy');
ele.modal('hide');
$('#info')
.html('***');
// wait 2 secs and see if the DOM element has gone
setTimeout( function(){
var num = $('#theBody').find('.modalContentCopy').length;
$('#info')
.html(num)
.css({ backgroundColor: (num === 0 ? 'lime' : 'red')});
}, 2000);
}
}
});
}
// Simple example of how to reveal the modal element as a f-ui modal
ele
.appendTo($('body'))
.modal('setting', 'transition', "vertical flip")
.modal('setting', 'onHide', function(){ return false; }) // stop any button closing the modal
// <solution starts>
.modal('setting', 'onVisible', function(){
ele
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
console.log('Animation complete')
$(this).off(e);
$(this).modal('destroy');
$(this).remove();
});
})
// <solution ends>
.modal('show'); // finally show the modal
}
p {
padding: 10px;
}
.modalContent {
border: 1px solid lime;
margin: 5px;
padding: 5px;
}
.modalHeading {
border: 1px solid cyan;
margin: 5px;
padding: 5px;
}
.modalBody {
border: 1px solid magenta;
margin: 5px;
padding: 5px;
}
.modalContent {
background-color: white;
}
.ipt {
margin: 5px 20px;
display: block;
}
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body id='theBody'>
<p>Click the 'show modal' button to open a modal, then the 'Close' button to close it. See console for messages. The critical point is the final display of the modal artefact count which appears after a 2 second delay, allowing for transitions to complete. We want a zero - what will it be?
</p>
<p>
<button id='b1'>Show a modal</button> <span>Count of DOM artifacts after close should be zero - value is >>>>> </span><span id='info'>[value will appear here after modal close]</span>
</p>
<div id='modalTemplate' style='display: none;'>
<div class='modalContent'>
<div class='modalHeading'>
I am the heading
</div>
<div class='modalBody'>
I am the body
</div>
<div class='modalButtons'>
</div>
</div>
</div>
</body>