根据 H4 标签中包含的特定文本隐藏 div答案

【问题标题】：Hide a div based on a specific text contained within H4 tag根据 H4 标签中包含的特定文本隐藏 div
【发布时间】：2016-09-07 18:38:26
【问题描述】：

下面的 html 是 Clicky.com 主页仪表板的精简版，我希望完全隐藏论坛 div 标签，其中包含包含短语“Clicky Forums”的 H4 标签。

<div class="fl small nounderline nowrap">
    <h4 class="inline">Clicky Forums</h4> &nbsp;
    <a class="no-ajax" href="/forums/">See more...</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 6</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18929">Adding goal to form submission javascrip...</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 5</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18928">no show visitor statistic</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 3</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18924">Number of new visitors per url in a spec...</a>
    <br>
</div>

【问题讨论】：

Help with hiding DIV tags, based on text content, using Greasemonkey

标签： jquery text show-hide tampermonkey

【解决方案1】：

您可以使用 JQuery 查找所有 <h4> 标签，然后检查每个标签的 .text() 是否匹配。如果找到，.hide() 元素的 .parent() 容器。

$('h4').each(function() {
  $el = $(this);
  
  if ($el.text() === 'Clicky Forums') {
    $el.parent().hide(); // or .remove()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Stuff before</p>

<div class="fl small nounderline nowrap">
    <h4 class="inline">Clicky Forums</h4> &nbsp;
    <a class="no-ajax" href="/forums/">See more...</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 6</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18929">Adding goal to form submission javascrip...</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 5</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18928">no show visitor statistic</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 3</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18924">Number of new visitors per url in a spec...</a>
    <br>
</div>

<p>Stuff after</p>

请注意，这只会隐藏论坛元素，您也可以使用.remove() 将它们完全从 DOM 中移除。

另请注意，这是一个相当脆弱的解决方案，如果部分标题发生变化，可能会中断（单个字母或大写差异会中断查询）。我建议尝试找到一些更具体的选择器，例如 ID，来识别论坛容器。

【讨论】：

你苏维特先生是我真正的冠军！ :) 像魅力一样工作，非常感谢 :)
这不是解决问题的好方法。我将在答案中概述原因
当然，是的，请！ :)
当然，先生，但它并不脆弱，因为他们测试并发现此文本有效:) 非常感谢 Sir.Soviut :)
@Eshwar 是的，它正在工作，但他提到了您用来选择元素的选择器。如果 h4 中的单个字母发生变化，它将中断。这就是为什么这里使用的选择器很脆弱。

【解决方案2】：

这是一个使用 jQuery 的简单方法

$('h4:contains("Clicky Forums")').parent().hide();

【讨论】：

是parent 不是父母 :)

【解决方案3】：

您可以简单地使用：

$("div h4:contains('Clicky Forums')").parent().hide()

sn-p：

$(function () {
  $("div h4:contains('Clicky Forums')").parent().hide();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="fl small nounderline nowrap">
    <h4 class="inline">Clicky Forums</h4> &nbsp;
    <a class="no-ajax" href="/forums/">See more...</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 6</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18929">Adding goal to form submission javascrip...</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 5</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18928">no show visitor statistic</a>
    <br>&nbsp; &nbsp;
    <span class="">Sep 3</span>&nbsp;
    <a class="no-ajax" href="http://clicky.com/forums/?id=18924">Number of new visitors per url in a spec...</a>
    <br>
</div>

【讨论】：