CODEWITHSUNDEEP
jquery
knackdig
knackdig

Reputation: 53

Nothing happening when using jQuery .removeClass

The .addClass works properly, however when I attempted to remove the same class on the same element when clicking the .close element, nothing happens. I've save the original element in $currGallery. When I console.log this on click, it shows the proper element object. Would appreciate any help!

    var $currGallery = null;

    var handler = function() {
      $currGallery = $(this);
      $(this).addClass("open-gallery");
      //$('.services > li').unbind( "click", handler );
    };

    $('.services > li').bind("click", handler);

    $('.close').click(function(){
      //console.log($currGallery);
      $currGallery.removeClass("open-gallery");
      //$('.services > li').bind( "click", handler );
    });

Upvotes: 0

Views: 38

Answers (2)

Emeka
Emeka

Reputation: 79

based on my understanding of the issue you posted, I will suggest you use jquery toggleClass function.

below is a sample code, and a link to the documentation.

http://api.jquery.com/toggleclass

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>toggleClass demo</title>
		<style>
			p {
				margin: 4px;
				font-size: 16px;
				font-weight: bolder;
				cursor: pointer;
			}
			.blue {
				color: blue;
			}
			.highlight {
				background: yellow;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	</head>
<body>

	<p class="blue">Click to toggle</p>

	<script>
		$( "p" ).click(function() {
			$( this ).toggleClass( "highlight" );
		});
	</script>
	
</body>
</html>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Most likely (without seeing your html) the .close element, is inside the .sevices > li element as well. So when you click on the .close it correctly removes the class but the event also bubbles up to the .sevices > li which in turn re-adds the class.

If that is the case then on the .close handler you need to stop the propagation so that it never reaches the li.

$('.close').click(function(e){
  e.stopPropagation();

  $currGallery.removeClass("open-gallery");
});

Upvotes: 1

Related Questions