Hide elements after clicking a button

问题

Using jquery, when I click on Search from documents I want to hide all li elements which have an aria-label that contains COMPANY in the vlaue. here is my HTML:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 30px; left: 0px; width: 236px;">
    <li class="search-documents-btn ui-menu-item" aria-label=" Search from documents &amp;raquo;" id="ui-id-111" tabindex="-1">
        Search from documents »
    </li>
    <li class="search-category ui-menu-item" id="ui-id-112" tabindex="-1">
        Companies
    </li>
    <li aria-label="test" class="ui-menu-item" id="ui-id-113" tabindex="-1">

    </li>
    <li aria-label="test1" class="ui-menu-item" id="ui-id-114" tabindex="-1">

    </li>
    <li class="search-category ui-menu-item" id="ui-id-122" tabindex="-1">
        Branches
    </li>
    <li aria-label="test2" class="ui-menu-item" id="ui-id-127" tabindex="-1">

    </li>
    <li aria-label="test3" class="ui-menu-item" id="ui-id-128" tabindex="-1">

    </li>
</ul>

any suggestions?

回答1:

You can use filter() to hide all the elements that have an aria-label that contains COMPANY. Try this:

$('#ui-id-111').on('click', function() {
    $(this).closest('ul').find('li').filter(function() {
        return $(this).attr('aria-label').indexOf('COMPANY') != -1;
    }).hide();
});

回答2:

You can use :contains pseudo-selector.

Select all elements that contain the specified text.

See the comments inline in the code:

// On click of the button
$('#ui-id-111').on('click', function() {
    $('li:contains("Company")').hide();
    // Hide all the li's that are containing `Company` as their innerText
});

DEMO

来源：https://stackoverflow.com/questions/31069599/hide-elements-after-clicking-a-button

标签

javascript

jquery

html

event-handling