Первая попытка создания юзерскрипта, и несмотря на то, что в интернете можно найти множество примеров удаления элементов со страницы, ни один из них не работает (а это похоже на одно из самых простых применений юзерскрипта).

Используя violentmonkey-2.12.8 на этой странице:

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

Я хочу убрать div "exitModalOverlay" (отключение его в инструментах разработчика делает именно то, что я хочу), который затемняет страницу (мешая мне ее читать).

Я вставлю один из наиболее распространенных методов, который я нашел (который не работает). Я буду признателен за любой метод, который работает. Спасибо.

// ==UserScript==
// @namespace confused
// @name zehohedge_remove_subscription_popup
// @version 1
// @description удаляет оверлейный div с запросом на подписку
// @match https://www.zerohedge.com/*
// @grant none
// @noframes
// ==/UserScript==

var todelete = document.getElementById('exitModalOverlay');
if (todelete) { todelete.parentNode.removeChild(todelete); }

confused

Ответов: 2

Ответы (2)

Может быть и так...

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

или

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

Согласно сообщению и комментариям, похоже, что элемент загружается/создается после DOM. В таком случае вам нужно будет запустить скрипт после завершения загрузки страницы.

Хотя при тестировании по предоставленной ссылке с включенным JavaScript (https://www.zerohedge.com/economics/2020-greatest-hits-most-popular-articles-past-year-and-look-ahead) элемент не появляется, вот пример того, как можно удалить элемент. Возможно, здесь задействованы другие факторы (например, браузер, страна, логин, куки и т.д.).

ViolentMonkey по умолчанию запускается на document-end, то есть после загрузки DOM, но до загрузки всех внешних элементов. Установка сценария пользователя на запуск в document-idle приведет к запуску после загрузки всех элементов.

// ==UserScript==
// @namespace confused
// @name zehohedge_remove_subscription_popup
// @version 1
// @description удаляет оверлейный div с запросом на подписку
// @match https://www.zerohedge.com/*
// @grant none
// @noframes
// @run-at document-idle
// ==/UserScript==

// найти элемент
const todelete = document.getElementById('exitModalOverlay');
// удаляем элемент, если он найден
if (todelete) { todelete.remove(); }

Удаление элемента - не единственный способ избавиться от элемента. Вы также можете использовать CSS для достижения аналогичного результата, установив его display в none. Например:

// ==UserScript==
// @namespace confused
// @name zehohedge_remove_subscription_popup
// @version 1
// @description удаляет оверлейный div с запросом на подписку
// @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 удаляет оверлейный div с запросом на подписку
// @match https://www.zerohedge.com/*
// @grant none
// @noframes
// @run-at document-idle
// ==/UserScript==

// найти элемент
const todelete = document.getElementById('exitModalOverlay');
// удаляем элемент, если он найден
if (todelete) { todelete.style.display = 'none'; }

📌 Стоит отметить, что CSS применяется все время (если не переписано специально), даже если элемент создан позже, в то время как JavaScript применяется в момент запуска и не будет применяться к элементам, созданным позже (без дополнительных методов, чтобы заставить его запуститься снова).

2022 WebDevInsider