"！important"を使用する場合のremoveClass（）の使用方法は？

Question

私は変更できないCSSを無効にするために、テキスト "Turkey | Meats"が存在する場合、 "li"を "！important"ルールで最初のliに追加する必要があります。

ここで、.removeClass（）で "hide"クラスを削除しようとすると、 "hide"がまだ残っていて、 "重要"ルールが原因だと思います。ここに私のコードです：

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