removing an element with a userscript - userscripts

Question

First attempt at a userscript, and despite finding numerous examples on the internet of how to remove elements from a page, none of them work (and this looks like one of the most basic applications of a userscript, too).
Using violentmonkey-2.12.8 on this page:
https://www.zerohedge.com/economics/2020-greatest-hits-most-popular-articles-past-year-and-look-ahead
I want to remove the "exitModalOverlay" div (disabling it in the developer tools does exactly what I want), which blacks out the page (preventing me from reading it).
I will insert one of the more common techniques I have found (which doesn't work). I would appreciate any method which does. Thanks.
// ==UserScript==
// #namespace confused
// #name zehohedge_remove_subscription_popup
// #version 1
// #description removes the overlay div that asks to subscribe
// #match https://www.zerohedge.com/*
// #grant none
// #noframes
// ==/UserScript==
var todelete = document.getElementById('exitModalOverlay');
if (todelete) { todelete.parentNode.removeChild(todelete); }

Answer 1

Based on the post & comments, it seems the element is loaded/created after the DOM. In that case, you would need to run the script after page loading is complete.
Although when testing on the link provided with JavaScript enabled (https://www.zerohedge.com/economics/2020-greatest-hits-most-popular-articles-past-year-and-look-ahead), the element does not appear, here is an example of how you can remove the item.
It is possible there are other factors involved (e.g. browser, country, login, cookies etc).
ViolentMonkey by default runs on document-end which is after DOM loaded but before all external elements are loaded.
Setting the userscript to run at document-idle will run after everything is loaded.
// ==UserScript==
// #namespace confused
// #name zehohedge_remove_subscription_popup
// #version 1
// #description removes the overlay div that asks to subscribe
// #match https://www.zerohedge.com/*
// #grant none
// #noframes
// #run-at document-idle
// ==/UserScript==
// find element
const todelete = document.getElementById('exitModalOverlay');
// remove element if found
if (todelete) { todelete.remove(); }
Removing the element is not the only way to get rid of an element. You can also use CSS to achieve a similar outcome by setting its display to none. For example:
// ==UserScript==
// #namespace confused
// #name zehohedge_remove_subscription_popup
// #version 1
// #description removes the overlay div that asks to subscribe
// #match https://www.zerohedge.com/*
// #grant GM_addStyle
// #noframes
// ==/UserScript==
const css = `
#exitModalOverlay {
display: none;
}`;
GM_addStyle(css);
Using JavaScript to apply CSS to the element without GM_addStyle (although not as good as above)
// ==UserScript==
// #namespace confused
// #name zehohedge_remove_subscription_popup
// #version 1
// #description removes the overlay div that asks to subscribe
// #match https://www.zerohedge.com/*
// #grant none
// #noframes
// #run-at document-idle
// ==/UserScript==
// find element
const todelete = document.getElementById('exitModalOverlay');
// remove element if found
if (todelete) { todelete.style.display = 'none'; }
📌 It is worth noting that CSS applies all the time (unless over-written specifically), even if an element is created later, while JavaScript applies at the time it runs and will not apply to elements created later (without additional methods to cause it to run again).

Answer 2

Maybe so...
window.onload = function() {
var todelete = document.querySelector('#exitModalOverlay');
todelete.outerHTML = '';
}
or
window.onload = function() {
var todelete = document.querySelector('#exitModalOverlay');
todelete.remove();
}