Hide <li> element using jquery?

I want to hide 2 links and to show only one depend on some parameter.

<ul class="treeview-menu">
 <li id="link1"><a runat="server" href="~/Map?park=link1"><i class="fa fa-link"></i></a>
 <li id="link2"><a runat="server" href="~/Map?park=link2"><i class="fa fa-link"></i></a>
 <li id="link3"><a runat="server" href="~/Map?park=link3"><i class="fa fa-link"></i></a>
</ul>

I tried this:

$(".treeview-menu").find("#link1").hide() 

and also this

$("#link1").hide(); 

But it doesn't work. I only succeeded with hiding all links using this part of code

$(".treeview-menu li").hide(); 

3 answers

  • answered 2020-05-22 12:40 Rush.2707

    $(document).ready(function(){
      if(1 == 1){
        $('li:eq(0)').hide();
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
    <ul class="treeview-menu">
     <li id="link1"><a runat="server" href="~/Map?park=link1"><i class="fa fa-link"></i> 1</a>
     <li id="link2"><a runat="server" href="~/Map?park=link2"><i class="fa fa-link"></i> 2</a>
     <li id="link3"><a runat="server" href="~/Map?park=link3"><i class="fa fa-link"></i> 3</a>
    </ul>

    change number in eq as per requirement,

  • answered 2020-05-22 12:41 Akeem Faulkner

    How about:

    $(".treeview-menu li:not(<the id of the li you don't want to hide>)").hide(); 
    // e.g $(".treeview-menu li:not(#link2)").hide(); 
    

  • answered 2020-05-22 12:42 Krishna Jonnalagadda

    One Two Three

    $(".treeview-menu #link1").hide() 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul class="treeview-menu">
     <li id="link1"><a runat="server" href="~/Map?park=link1"><i class="fa fa-link">One</i></a>
     <li id="link2"><a runat="server" href="~/Map?park=link2"><i class="fa fa-link">Two</i></a>
     <li id="link3"><a runat="server" href="~/Map?park=link3"><i class="fa fa-link">Three</i></a>
    </ul>