I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code:
<div id="nav_menu">
<ul id="nav">
<li class="current"><a href="home.aspx">HOME</a> </li>
<li><a href="iam.aspx">I AM A...</a>
<ul>
<li><a href="whoweare.aspx">WHO WE ARE</a>
<ul>
<li><a href="profile.aspx">OUR EXPERIENCE</a> </li>
<li><a href="team.aspx">OUR TEAM</a></li>
<li><a href="mission.aspx">MISSION, VALUES, VISION</a></li>
<li><a href="strength.aspx">STRENGTHENING COMMUNITIES</a></li>
<li><a href="stories.aspx">WHERE STORIES ARE MADE</a></li>
</ul>
</div>
Initially, I attempted to remove the desired <li> element using CSS pseudo-class selectors, but encountered issues with all second-position items being affected:
nav li ul li:nth-child(2) { display: none; }Subsequently, I tried utilizing jQuery for this task, but believe there may be a mistake in my implementation. Any assistance would be greatly appreciated:
(function($) {
$(document).ready(function(){
$("#nav li ul li:has(a[href='team'])").remove();
});
})(jQuery);