Я знаю, что подобные вопросы задавались бесчисленное количество раз, я уже некоторое время их читаю, но, похоже, я не могу заставить их работать в моем случае, я прочитал следующее и попыталсяприменить эти решения к моему делу, все из Stack Overflow, но я не добился успеха, поэтому я был бы признателен за помощь.
Статья 1 Статья 2 Статья 3 Статья 4 Статья 5
Я хочу удалить статьи "This Week in Anime" с боковой панели на сайтах animenewsnetwork.com,Пример кода, который я хотел бы удалить:
<div class="herald box column" data-topics="article141022 column anime">
<div class="category-line column"></div>
<div class="thumbnail" data-src="/thumbnails/cover400x200/cms/this-week-in-anime/141022/g24.png.jpg">
<div class="overlay">
<div class="category column">column</div>
<div class="comments"> <a href="/cms/discuss/141022">51 comments</a> </div>
</div>
<a href="/this-week-in-anime/2018-12-20/.141022" data-track="id=66149&from=HP.MF"></a>
</div>
<div class="wrap">
<div>
<h3>
<a href="/this-week-in-anime/2018-12-20/.141022" data-track="id=66149&from=HP.MF">This Week in Anime - Is Back Street Girls: Gokudols Worth Watching?</a>
</h3>
<div class="byline">
<time datetime="2018-12-20T19:31:04Z" title="2018-Dec-20 11:31:04 -0800 (1.4 day ago)">Dec 20, 14:31</time>
<div class="comments"> <a href="/cms/discuss/141022">51 comments</a> </div>
<span class="topics"> <span class="anime">anime</span> </span>
</div>
<div class="preview">
<span class="intro">Netflix's newest anime acquisition is controversial to say the least. Andy and Steve find out (the hard way) if there's any decent comedy hiding under this show's initial shock factor.
</span>
<span class="full">Netflix's newest acquisition, Back Street Girls: Gokudols, is controversial to say the least. This week, Andy and Steve find out if there's any decent comedy hiding under this show's initial shock factor. Disclaimer...
</span>
</div>
</div>
</div>
</div>
Я хотел бы полностью удалить это, я попытался, как мне кажется, искать строку «this-week-in-anime» изатем удаляя или скрывая его родитель, но я так и не смог заставить его работать.
Я пробовал такие вещи:
var badDivs = $("div div:contains('this-week-in-anime')");
badDivs.hide ();
и
var badDivs = $("div div:contains(this-week-in-anime)");
badDivs.parent ().hide ();
и
$('li:contains("this-week-in-anime")').parent().hide();
Редактировать: окончательная форма сценария и советы, полученные в других местах.
==UserScript==
// @name _Anime News Network, remove "This Week in Anime" articles
// @match *://www.animenewsnetwork.com/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function () {
'use strict';
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
var getParent = function (node, selector) {
while (node && node.parentNode) {
node = node.parentNode;
if (node.matches(selector)) {
return node;
}
}
};
document.querySelectorAll(".thumbnail > a[href*='this-week-in-anime']").forEach(function (v) {
var node = getParent(v, '.herald.box');
if (node) {
node.remove();
}
});
})();
SЧто нужно учесть:
Инкапсулируйте ваши вещи в функции.Это предотвращает доступ к вещам, которые вы объявляете доступными с самой страницы.
"use strict";
, так как первая строка в функции исправляет некоторое раздражение JS, которое вы можете не уловить сразу.Например, опечатка в имени переменной.
Старайтесь избегать использования @require
.Это может блокировать загрузку страницы на долгое время, если у этого ресурса возникают проблемы при доставке
Если вы хотите удалить элементы, @run-at document-idle
- хорошее начало, поскольку оно гарантирует, что событие «load» сработало
Если элемент, который вы хотите удалить, динамически загружается позднее, используйте setInterval
или лучше MutationObserver
Попробуйте избежать jQuery.Большинство его функций уже доступно в обычном JS.
В моем примере я полностью удаляю узел.Если вы не хотите этого, вы можете использовать node.style.display='none'