jquery - 如果使用 "!important"，如何使用 removeClass()？

Question

为了覆盖我无法更改的 CSS，我需要在出现文本“Turkey | Meats”时使用“!important”规则将类“hide”添加到第一个 li。

现在，当我尝试使用 .removeClass() 删除“隐藏”类时，“隐藏”仍然存在，我认为这是因为“!important”规则。这是我的编码:

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

Answer 1

添加/删除类工作正常，检查这个例子:

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>