Removing/Hiding a Menu Item

I have the following unordered list that is rendered as a menu.

Using jQuery, how can I hide/remove the second list item altogether so that it isn’t rendered on the screen and so is not presented to the user, that is, the menu called “Menu2” ?

This will be based on a condition I want to add later on.

Unsure how to pin point and remove/hide Menu2.

<ul id="menuGrps"> 
  <li class="current"> <a class="sf-with-ul" href="javascript:parent.addItemURL()">Menu1</a> </li>       
  <li class="current"> <a class="sf-with-ul" href="javascript:parent.addItemURL()">Menu2</a> </li> 
  <li class="current"> <a class="sf-with-ul" href="javascript:parent.addItemURL()">Menu3</a> </li> 
</ul>

Thanks.

jQuery('document').ready(function(){
    // You can add your condition here
    jQuery("#menuGrps li:eq(1)").hide();
});

To filter by description you would need a loop:

$(function() {
    $('#menuGrps li a').each(function() {
        if($(this).html() === 'Menu2') {
          $(this).hide();
        }

    });
});