使用用户脚本删除元素

Question

第一次尝试使用用户脚本，尽管在互联网上找到了大量关于如何从页面中删除元素的示例，但其中 none 有效（这看起来像是用户脚本最基本的应用之一，也是）。

在此页面上使用 violentmonkey-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 之后的 loaded/created。在这种情况下，您需要在页面加载完成后运行脚本。

尽管在启用 JavaScript 的 link 上进行测试时 (https://www.zerohedge.com/economics/2020-greatest-hits-most-popular-articles-past-year-and-look-ahead)，该元素没有出现，这里是一个如何删除该项目的示例。可能还涉及其他因素（例如浏览器、国家/地区、登录名、cookie 等）。

ViolentMonkey by default 运行s on document-end 这是在 DOM 加载之后但在加载所有外部元素之前。在 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 在它运行s 并且不会应用于以后创建的元素（没有其他方法使其再次运行）。

使用用户脚本删除元素

removing an element with a userscript

userscripts