CODEWITHSUNDEEP
javascriptjqueryhtml
Pablo Sánchez
Pablo Sánchez

Reputation: 43

Hide <li> tag when clicked with JQuery

I'm doing some exercises to practice my JQuery but i can't manage to find the solution with this. I just want to hide the first element of the list when it's clicked.

I've tried this:

JS

    $(document).ready(function(){
        $("li.oculta").click(function(){
		  $(this).hide();
	    });
    });
<html>
 <head>
 <style>
	p{
		background-color: #AA55AA;
	}
 </style>
 <script src="/jquery-2.1.1.js"></script>
 </head>
 <body>
	<ul class='list1'>
		<li class="oculta">Taco</li>
		<li>Jamón</li>
		<li>Queso</li>
	</ul>
	<ul class='list2'>
		<li class="oculta">Coke</li>
		<li>Leche</li>
		<li>Té</li>
	</ul>
 </body>
 </html>

But i can't figure out why isn't working. Any ideas?

Upvotes: 2

Views: 64

Answers (2)

Wowsk
Wowsk

Reputation: 3675

Very simple error, the code is all right, but you forgot to import jQuery.

$(document).ready(function(){
        $("li.oculta:first-of-type").click(function(){
		  $(this).hide();
	    });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <head>
 <style>
	p{
		background-color: #AA55AA;
	}
 </style>
 <script src="/jquery-2.1.1.js"></script>
 </head>
 <body>
	<ul class='list1'>
		<li class="oculta">Taco</li>
		<li>Jamón</li>
		<li>Queso</li>
	</ul>
	<ul class='list2'>
		<li class="oculta">Coke</li>
		<li>Leche</li>
		<li>Té</li>
	</ul>
 </body>
 </html>

Upvotes: 0

Abozanona
Abozanona

Reputation: 2285

Use on('click',function(){... instead of .click(function(){...

$(document).ready(function(){
    $("li.oculta").on('click',function(){
      $(this).hide();
    });
});

jsfiddle

Upvotes: 1

Related Questions