Question

下面的html是Clicky.com主页信息中心的精简版本，我希望隐藏具有div标记的论坛H4标记，其中包含短语“Clicky Forums”。 / 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>

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

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: