Fullcalendar Mutation Observer Failing to Detect Deletion of DOM Element

I am modifying the text of the "More" links created by Fullcalendar V6. When those links are clicked, Fullcalendar re-renders its own text into the element, which is behind the popover div and cannot be seen. Once the popover is deleted, I need to again correct the text.

I have set listeners on the cancel button which work well, but if the user clicks anywhere outside the popover or taps the escape key, the popover is deleted without firing my Mutation Observer. If I set a timeout to delete the popover, the mutation observer correctly detects the change.

What am I missing?

(This project includes jQuery, but it's not necessary)

$(document).on('click', 'a.fc-daygrid-more-link, .fc-popover-close', function(){ // fullCalendar rerenders the More links when they are clicked, so we have to redo the fixes fixLinksOnCalendar(true); setTimeout(() => { var popoverID = $(this).attr('aria-controls'); console.log('popover id='+popoverID ); var elem = document.getElementById(popoverID) observeDeletion(elem); // this test deletion is detected as expected setTimeout(function(){ console.log('Deleting the elem'); $(elem).remove(); }, 5000); }, 400); }); function observeDeletion(elem){ var target = elem.parentNode; console.log('observing target:', target); const calPopupObserver = new MutationObserver(function (e) { console.log('Generic Mutation:', e); if (typeof e[0].removedNodes === 'array' && e.removedNodes[0] === elem){ console.log('Fixing Links'); fixLinksOnCalendar(true); calPopupObserver.disconnect(); return; } }); calPopupObserver.observe(target, { childList: true, subtree: true, }); }; function fixLinksOnCalendar(repeat){ // they are way too low in the grid, especially on mobile setTimeout(function(){ // FC needs some time var calTextColor = settings.dark_ui == 'no' ? settings.colors[5]:settings.colors[4]; $('.fc-more-link, a.fc-more-link, a.fc-daygrid-more-link').css({marginTop: '-10px', color: calTextColor, fontWeight: 600}); if ($(window).width() < 521){ // shorten and restyle the link text var newText; $.each($('.fc-more-link'), function(){ newText = '+'+parseInt($(this).text(), 10); $(this).text(newText).css({color: 'white', backgroundColor: settings.colors[5], padding: '3px 6px', borderRadius: '10px', marginLeft: '12px'}); }); $.each($('a.fc-more-link'), function(){ newText = '+'+parseInt($(this).text(), 10); $(this).text(newText).css({color: 'white', backgroundColor: settings.colors[5], padding: '3px 6px', borderRadius: '10px', marginLeft: '12px'}); }); $.each($('a.fc-daygrid-more-link'), function(){ newText = '+'+parseInt($(this).text(), 10); $(this).text(newText).css({color: 'white', backgroundColor: settings.colors[5], padding: '3px 6px', borderRadius: '10px', marginLeft: '12px'}); }); } if (repeat) fixLinksOnCalendar(false); },300); }