hide div if specific text is displayed in span

Question

I'm trying to hide a a div if a specific text is displayed in a span. I'm using jquery and this is the code:

HTML

<div class=“deliveryUpsellText”>
<p>blabla</p>
</div>


<ul>
  <li class=“error-msg”>
   <ul>
    <li>
     <span> Coupon Code “blabla” is not valid
     </span>
    </li>
   </ul>
  </li>
</ul>


<button type="button" id="cartCoupon" title="Apply Coupon" class="button applycouponhide" onclick="discountForm.submit(false) ; " value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>

jQuery

$j('#cartCoupon').click(function(){
if($j(".error-msg span:contains('blabla')")){
    $j('.deliveryUpsellText').css({"display":"none"});
}

});

It hides the div on click, but it ignores the if statement. So even if the text in the span was 'cat' it still hides the div. Can anybody spot what I've done wrong? Also as the #cartCoupon button has the onclick event dicountForm.submit(false); the deliveryUpsellText is being hidden on click but it's not bound to the form submit so it shows again once the form has been submitted. Anybody know how I can fix that?

Answer 1

jQuery collection is always truthy (because it's an object). You need to check if it contains nodes (selected something). Use length property for this:

if ($j(".error-msg span:contains('blabla')").length) {
    $j('.deliveryUpsellText').css({
        "display": "none"
    });
}