CODEWITHSUNDEEP
javascripthtmljquerycss
taurus
taurus

Reputation: 272

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();

Upvotes: 2

Views: 1264

Answers (3)

Rush.2707
Rush.2707

Reputation: 683

$(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,

Upvotes: 1

jvk
jvk

Reputation: 2201

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>

Upvotes: 0

Akeem Faulkner
Akeem Faulkner

Reputation: 1

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();

Upvotes: 0

Related Questions