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的document.querySelectorAll查找具有img的{{1}}来查找所有实例。然后，我们可以手动检查src中某处是否存在span的违规文字。 div可以通过考虑parentElement找到div，直到我们找到一个类col-xs-12。

最后，只有在页面加载后才能执行所有操作。结果如下。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用Greasemonkey隐藏元素

1 个答案: