Скрытие элемента li с помощью div / class

Question

Я пытаюсь скрыть элементы (li?) В меню быстрого запуска, где написано «Преимущества скрыты», HTML есть;

<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
    <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
        <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">
                <span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Defra Benefits Dev</span></span>
            </a>
            <ul class="static">
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Information</span></span></a></li>
                <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits</span><span class="ms-hidden">Currently selected</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
            </ul>
        </li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="javascript:PDPInfrastructure.NavigateWSSPage(0,true)"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Site</span></span></a></li>
    </ul>
</div>

Я попробовал следующее без удачи

<script>
$(document).ready(function() {
    $("#zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();
});
</script> 

Answer 1

$('.menu-item-text').each(function() {
  this.textContent.trim() === 'Benefits HIDDEN' && $(this).closest('li').hide();
});

<div class="noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
  <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
    <li class="static">
      <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">
        <span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Defra Benefits Dev</span></span>
      </a>
      <ul class="static">
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Information</span></span></a></li>
        <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits</span><span class="ms-hidden">Currently selected</span></span></a></li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
      </ul>
    </li>
    <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="javascript:PDPInfrastructure.NavigateWSSPage(0,true)"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Site</span></span></a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Поскольку многие элементы содержат этот текст (не только элементы span, в которых он находится, но li, в котором находится span, его ul, et c., Et c. - даже сам элемент #zz13_idPDPQuickLaunch), вы должны быть более точными c со своим селектором.

В идеале, добавьте класс или что-то к самому внутреннему элементу, который вы хотите скрыть. Но вы также можете сделать это структурно. Например, если вы хотите скрыть li s:

$(document).ready(function() {
    $("#zz13_idPDPQuickLaunch li ul li.static:contains('Benefits HIDDEN')").hide ();
});

Live Пример:

$(document).ready(function() {
    $("#zz13_idPDPQuickLaunch li ul li.static:contains('Benefits HIDDEN')").hide ();
});

<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
    <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
        <li class="static">
            <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/">
                <span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Defra Benefits Dev</span></span>
            </a>
            <ul class="static">
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Information</span></span></a></li>
                <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits</span><span class="ms-hidden">Currently selected</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/pwa/"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Benefits HIDDEN</span></span></a></li>
            </ul>
        </li>
        <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="javascript:PDPInfrastructure.NavigateWSSPage(0,true)"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Site</span></span></a></li>
    </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Это говорит о том, что вы хотите скрыть только элементы, содержащие этот текст , если они li элементы с классом static внутри ul внутри li внутри элемента # zz13_idPDPQuickLaunch`.

Answer 3

Вам необходимо l oop каждый элемент "li" и сначала проверить текст внутри него. Попробуйте это:

$(function(){

            var menu_items = $("#zz14_RootAspMenu").find("li");
          menu_items.each(function(idx,el){
            var current_text = $(el).find('.menu-item-text').text();

            if(current_text == "Benefits HIDDEN"){
              $(this).hide();
            }
          })


        });