How to use removeClass() if "!important" is used?

Question

In order to override CSS that I can not change, I need to add the class "hide" to the first li with an "!important" rule when the text "Turkey | Meats" is present.

Now, when I attempt to remove the "hide" class with .removeClass(), "hide" still remains and I think it's because of the "!important" rule. Here's my coding:

(function($) {
  if ($(".nav li:nth-of-type(2)").text().trim() == "Turkey | Meats") {
    $(".nav li:nth-of-type(1)").addClass("hide");
  } else {
    $(".nav li:nth-of-type(1)").removeClass("hide");
  }
});

.hide {
  display:none !important;
}

<div class="nav">
  <ul class="nav-list">
    <li class="nav-link">
      <a href="">Fish</a>
    </li>
    <li class="nav-link">
      <a href="">Turkey | Meats</a>
    </li>
  </ul>
</div>

Possible duplicate of [Can I use jquery to remove/negate css !important rule?](https://stackoverflow.com/questions/11890739/can-i-use-jquery-to-remove-negate-css-important-rule) — Scath, Sep 22 '17 at 18:17
try to console.log the element. the !important doesn't affect class removing at all... — Maxwell s.c, Sep 22 '17 at 18:19

SilverSurfer · Answer 1 · 2017-09-22T18:28:41.853

Add/remove class is working fine, check this example:

if ($(".nav li:nth-of-type(2)").text().trim() == "Turkey | Meats") {
        $(".nav li:nth-of-type(1)").addClass("hide");
        console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
} else {
        $(".nav li:nth-of-type(1)").removeClass("hide");
        console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
}
$("button:first").click(function(){
    $(".nav li:nth-of-type(1)").removeClass("hide");
    console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
});
$("button:last").click(function(){
    $(".nav li:nth-of-type(1)").addClass("hide");
    console.log("Fish class: "+$(".nav li:nth-of-type(1)").attr("class"))
});

.hide {
  display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul class="nav-list">
    <li class="nav-link">
      <a href="">Fish</a>
    </li>
    <li class="nav-link">
      <a href="">Turkey | Meats</a>
    </li>
  </ul>
  <button type="button">Remove Class .hide</button>
  <button type="button">Add Class .hide</button>
</div>

How to use removeClass() if "!important" is used?

1 Answers1