Скрыть div, основанный на конкретном тексте, содержащемся в теге H4

Question

html ниже представляет собой сконденсированную версию домашней панели мониторинга Clicky.com, я хочу скрыть теги div, в которых есть тег H4, содержащий фразу «Clicky Форумы».

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

Также обратите внимание, что это довольно хрупкое решение и может быть нарушено, если заголовок раздела изменяет на всех (различие в одной букве или разнице в слове приведет к разрыву запроса). Я бы посоветовал попытаться найти более конкретный селектор, например идентификатор, для определения контейнера форума.

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>