1

我知道类似的问题已经被问过无数次了，我已经阅读了一段时间，但我似乎无法让它适用于我的案例，我已经阅读了以下内容并尝试应用这些解决方案就我而言，全部来自 Stack Overflow，但我没有成功，所以我很感激帮助。

第 1 条 第 2 条 第 3 条 第 4 条 第 5 条

我想从 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&amp;from=HP.MF"></a>
  </div>
  <div class="wrap">
    <div>
      <h3>
        <a href="/this-week-in-anime/2018-12-20/.141022" data-track="id=66149&amp;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" 然后删除或隐藏它的 parent ，但我从来没有让它工作。

我试过这样的事情：

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

需要考虑的一些事项：

将你的东西封装在一个函数中。这可以防止您声明可以从页面本身访问的内容。

"use strict";因为函数中的第一行修复了一些您可能无法立即发现的 JS 烦恼。例如，变量名中的拼写错误。

尽量避免使用@require. 如果该资源无法交付，这可能会长时间阻止页面加载

如果要删除元素，@run-at document-idle这是一个好的开始，因为它确保“加载”事件已触发

如果您要删除的元素是稍后动态加载的，请使用 asetInterval或更好的MutationObserver

尽量避免使用 jQuery。到目前为止，它的大部分功能都可以在常规 JS 中使用。

在我的示例中，我完全删除了节点。如果你不想这样，你可以使用node.style.display='none'

4

1 回答 1

0

实际上，您链接的第一篇文章具有您需要的技术。由于您的目标页面使用 javascript 添加了令人反感的内容，因此您需要使用类似waitForKeyElements().

请注意，:contains搜索文本，但有问题的“this-week-in-anime”在各种节点属性中。因此，我们在他们的href.

这是您的目标网站的配置：

// ==UserScript==
// @name     _Anime News Network, remove "This Week in Anime" articles
// @match    *://www.animenewsnetwork.com/*
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    none
// ==/UserScript==
//-- WARNING: Using the page's copy of jQuery.  This may blow up at some point.
/* global $, waitForKeyElements */

waitForKeyElements (".thumbnail > a[href*='this-week-in-anime']", hideContainerNode);

function hideContainerNode (jNode) {
    //-- jQuery closest() finds an ancestor of current node.
    var containerNode = jNode.closest (".herald.box");
    containerNode.hide ();
}
于 2018-12-22T06:23:34.677 回答