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

Question

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

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

Answer 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，以识别论坛容器。

Answer 2

这是一个简单的使用 jQuery

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

Answer 3

您可以简单地使用：

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

片段：

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

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

Hide a div based on a specific text contained within H4 tag

jquery

text

show-hide

tampermonkey