如何使用 Greasemonkey 隐藏元素

Question

我希望在我访问的这个网站上永久隐藏一个元素。我知道这可以用 Greasemonkey 来完成，但我不知道该怎么做。

代码如下：

<div class="col-xs-12 col-sm-3">
<div class="widget-box">
<div class="widget-content">

<div id="40496">


<center>

<div class="alert alert-info">Coins: 4</div>

<span style="font-size:0.8em;" class="external-event ui-draggable label label-danger">Anti-Bots ne pas cliquer</span>
<img src="http://www.somesite.com/wp-content/uploads/2016/01/no_bots.jpeg" class="follower" width="150" height="112.5" border="0"><br><br>

我需要隐藏整个元素，但它被隐藏的原因必须是 img src 或“Anti-Bots ne pas cliquer”文本。如果我使用任何 div 或 ID 或其他任何东西来隐藏它，它也会隐藏我不想隐藏的内容。 img src 或该文本必须是脚本隐藏元素的关联。

我希望我说清楚了，希望任何人都能提供帮助。

Answer 1

可以使用 attribute selector that is passed to document.querySelectorAll to find all instances. We can then manually check if there is a span with the offending text somewhere in the div. The div can be found by considering the parentElement 找到具有特定 src 的 img，直到我们找到具有 class col-xs-12 的 col-xs-12。

最后，一切都必须在页面加载后才执行。结果如下

window.addEventListener('load', () => {
  var imgs = document.querySelectorAll('img[src="http://www.somesite.com/wp-content/uploads/2016/01/no_bots.jpeg"]');
  for (let img of imgs) {
    // find enclosing .col-xs-12
    let el = img;
    while (!el.classList.contains('col-xs-12')) {
      el = el.parentElement;
    }
    // find spans, check if one has the offending text
    let spans = el.querySelectorAll('span');
    for (let span of spans) {
      if (span.textContent === 'Anti-Bots ne pas cliquer') {
        el.parentElement.removeChild(el); // this deletes the div
        //el.style.display = 'none'; // this hides the div
        break;
      }
    }
  }
});

<p>I should not be hidden.</p>
<div class="col-xs-12 col-sm-3">
<div class="widget-box">
<div class="widget-content">

<div id="40496">


<center>

<div class="alert alert-info">Coins: 4</div>

<span style="font-size:0.8em;" class="external-event ui-draggable label label-danger">Anti-Bots ne pas cliquer</span>
<img src="http://www.somesite.com/wp-content/uploads/2016/01/no_bots.jpeg" class="follower" width="150" height="112.5" border="0"><br><br>

如何使用 Greasemonkey 隐藏元素

How to hide an element using Greasemonkey

javascript

greasemonkey