Using Jquery to determine Page in Edit Mode O365

If you have a scenario where you need to determine if the page is edit mode and display a control/container. Here is the approach

• Define the container with a unique ID/Class
• Add JQuery to some .js file.
• Ensure that editmode15.css is loaded in one of the edit panels of the page layout associated with this page. Alternatively, you could also add something else in an edit panel and then check that going through the DOM object.
• Then, add code like below.

        loadedStylesheets = document.styleSheets;
   
        for (var i in loadedStylesheets)
        {

            var findEditStyle = "https://SERVER/Style%20Library/en-US/Themable/Core%20Styles/editmode15.css"
                if (findEditStyle == loadedStylesheets[i].href)
                {
                    $('#YourID').removeClass('hidden');
                    $('#YourExtraIDs').removeClass('hidden');
                };
           
        }

Determine if

//Hiding the News From Leaders Section and making it visible in Edit Mode.
        /*
        check to see if WPEditModev4.css is loaded
        if so, this means you're in "edit" mode
        */
        // check to see if no news elements exist in 'News From Our Leaders' section
        if ($('#nLeader .articleContainer').length == 0)
        {
            $('#nLeader').addClass('hidden'); // hide the parent container if no articles
            $('#LeaderBreak').addClass('hidden');
        };
   
   
        loadedStylesheets = document.styleSheets;
   
        for (var i in loadedStylesheets)
        {
            //This path would be fixed as this is being loaded from the page layout.
            var findEditStyle = "https://yumbrandsinc.sharepoint.com/sites/ynn/Style%20Library/en-US/Themable/Core%20Styles/editmode15.css"
            var findStylesheet = "WPEditModev4.css";
                //var currentStylesheet = (loadedStylesheets[i].href.match(/\/([^/]+)$/)[1]);
                if (findEditStyle == loadedStylesheets[i].href)
                {
                    $('#nLeader').removeClass('hidden');
                    $('#LeaderBreak').removeClass('hidden');
                };