CODEWITHSUNDEEP
javascripthtmljquerycss
ashley g
ashley g

Reputation: 885

how to remove class from html

So i am trying to detect if one of my navigational elements has a certain class upon click and if it does then remove it and if it don't then add it.

The methodology behind this is to show an active state on the dropdown button while the dropdown is open. And to loose that state once another nav element has been clicked or something outside the dropdown menu has been clicked. This logic currently works fine.

However another case i have is to loose the active state if the same button has been clicked, this currently dont work. The first condition in the if statement is never hit so the class is always being toggled.

JS:

  $(document).ready(function () {

    //WORKS
    $(document).click(function () {
        $('.link.activeLink').removeClass('activeLink')
    });

    //WORKS
    $('.nav-link').click(function () {
        $('.link.activeLink').removeClass('activeLink')
    });

    //FAILS
    $('.link').click(function () {
        if ($(this).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        }
        else {
            $(this).toggleClass('activeLink');
        }
    }); 

});

css:

.activeLink {
    background-color: #31A7DF;
}

HTML:

  <a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Flat Roofing
                        </a>

Upvotes: 1

Views: 98

Answers (5)

ashley g
ashley g

Reputation: 885

This seemed to have resolved my issue

    $(document).ready(function () {
    $(document).click(function (e) {
        $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function (e) {
        if ($(e.target).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        } else {
            $('.link.activeLink').removeClass('activeLink')
            $(this).toggleClass('activeLink');
        }         
    });
});

Upvotes: -1

Tad Wohlrapp
Tad Wohlrapp

Reputation: 1897

The keyword here is event propagation, so every click on the link is also a click on the document, as .link is a child of document.

The code below should do the trick. It toggles the class if the link is clicked, and it always removes the class if anything else but the link is clicked.

$(document).ready(function() {

  $('#flatRoofingDropdown').click(function(event) {
    $(this).toggleClass('activeLink');
  });
  
  $(document).click(function(event) {
  if (!$(event.target).closest('#flatRoofingDropdown').length) {
    $('#flatRoofingDropdown').removeClass('activeLink');
  }
});

});
.activeLink {
  background-color: #31A7DF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
  Flat Roofing
</a>

Upvotes: 0

simmer
simmer

Reputation: 2711

There's no need to add the hasClass logic around toggleClass(), since that's what toggleClass(className) does for you.

  • does the equivalent of addClass(className) if className isn't present
  • does the equivalent of removeClass(className) if it is

Reference here: api.jquery.com/toggleclass/

Try this:

<a class="link activeLink">link 1</a>
<a class="link">link 2</a>

$('.link').click(function () {
  $(this).toggleClass('activeLink');
});

// link 1 clicked:
// <a class="link">link 1</a>

// link 2 clicked:
// <a class="link activeLink">link 2</a>

Upvotes: 0

Joel Hager
Joel Hager

Reputation: 3442

You only need to use .toggleClass() Toggle class will look and see if it's there, and remove it if it is, and add it if it isn't. Your last case should look like this:

$('.link').click(function() {
  $(this).toggleClass('activeLink');
}

The above code is all you need to check and toggle classes with jQuery. :)

Upvotes: 2

onewaveadrian
onewaveadrian

Reputation: 453

As far as I can see the if-statement is not required at all. According to jQuery documentation toggleClassalready does the job for you. See example here it looks like that does what you try to achieve?

Upvotes: 0

Related Questions