I'm working with a jQuery plugin named Notify.js. The plugin create messages in the DOM and removes them on click.

I've created a button that will remove all messages. The button should only exist when there are more than two messages.

I've added a MutationObserver to check if the messages container has < 3 children and if so, the button should be removed.

That works well in Edge, Firefox and Opera but not in Chrome.

After canceling the Chrome Options of accelerating hardware and allowing programs to work in the background, the feature works on my computer, but not for my team mates.

Help would be much appreciated.

function message(text, type, obj_id) {
    var auto_hide = true;
    var auto_hide_delay = 10000;
    if (type == "error") {
        auto_hide_delay = 60000; 
    }

    var notify_properties = {
        clickToHide: true,
        autoHide: auto_hide,
        autoHideDelay: auto_hide_delay,
        elementPosition: "bottom center",
        globalPosition: "bottom left",
        className: type,
        showAnimation: "slideDown",
        showDuration: 400,
        hideAnimation: "slideUp",
        hideDuration: 200,
        gap: 2,
    };

    handle_close_all_messges();
    if (obj_id == undefined || $("#" + obj_id).length == 0) {
        $.notify(text, notify_properties);
    } else {
        $("#" + obj_id).notify(text, notify_properties);
    }
}
function handle_close_all_messges() {
    const notifyjs = document.querySelector('.notifyjs-corner');

    if (notifyjs && notifyjs.childElementCount > 2) {
        create_notifyjs_observer();
        create_messages_container();
        create_close_all_msgs_btn();
        add_notifyjs_to_container();
    }
}
function create_notifyjs_observer() {
    if (document.querySelector('.messages-container')) {
        return;
    }

    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 
    const observer = new MutationObserver(onMutationObserved); 
    const notifyjs = document.querySelector('.notifyjs-corner');
    const options = { childList: true, subtree: true };
    
    observer.observe(notifyjs, options);
}

function onMutationObserved (mutations_list) {
    for (let mutation of mutations_list) {
        if (mutation.type === 'childList') {
            const notifyjs = document.querySelector('.notifyjs-corner');
            if (notifyjs && notifyjs.childElementCount < 3) {
                delete_close_all_msgs_btn();
            }
        }
    }
}

Link to full code: https://jsfiddle.net/a5eLpq4z/