用userscript删除元素

Question

第一次尝试一个用户脚本，尽管在互联网上找到了许多如何从页面中删除元素的例子，但它们都不起作用(这看起来也是用户脚本最基本的应用程序之一)。

使用暴力猴子-2.12.8在本页：

https://www.zerohedge.com/economics/2020-greatest-hits-most-popular-articles-past-year-and-look-ahead

我想要删除"exitModalOverlay“div (在开发人员工具中禁用它就能完成我想做的事情)，它会使页面变黑(阻止我阅读它)。

我将插入我发现的更常见的技术之一(这是不起作用的)。我希望任何方法都能做到。谢谢。

​

// ==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

也许如此..。

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

或

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

Answer 2

基于post &注释，元素似乎是在DOM之后加载/创建的。在这种情况下，需要在页面加载完成后运行脚本。

尽管在JavaScript enabled (https://www.zerohedge.com/economics/2020-greatest-hits-most-popular-articles-past-year-and-look-ahead)提供的链接上进行测试时，元素不会出现，但下面是如何删除该项的示例。有可能涉及其他因素(例如浏览器、国家、登录、cookie等)。

默认情况下，ViolentMonkey运行在document-end上，在加载DOM之后，但在加载所有外部元素之前。将userscript设置为在document-idle运行将在加载所有内容之后运行。

// ==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(); }

移除元素不是摆脱元素的唯一方法。您还可以使用CSS通过将其display设置为none来实现类似的结果。例如：

// ==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);

使用JavaScript将CSS应用于没有GM_addStyle的元素(尽管不如上面那样好)

// ==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'; }

值得注意的是，CSS一直在应用(除非是重写的)，即使元素是稍后创建的，而JavaScript在运行时应用，并且不会应用于稍后创建的元素(没有其他方法使其再次运行)。