CODEWITHSUNDEEP
javascriptjquerycssif-statementshow-hide
Harry Mac
Harry Mac

Reputation: 163

if this class contains, then hide other class content

<div class="product_discountprice" id="product_discountprice1">
    <font color="red">
        <b style="font-size: 20px; font-weight: bold;">VIP Price:
            <p class="listpriceonGrid">List Price</p>
        </b>
    </font>
    <font class="pricecolor colors_productprice">$63.00</font>
</div>

They have this code on the site. You may check the actual site here --> https://www.colonialacres.com/category-s/928.htm You'll see that some items has VIP Price and List Price, and some items don't have VIP Price. What I would like to do is to hide the "List Price" text if there's a VIP Price on the item, but if there's no VIP Price text, the List Price should be there. Any idea, advices, and help will be much appreciated.

I'm not really good in javascript esp when it comes to if-else. I tried it earlier:

<script type="text/javascript">
$(window).load(function(){
    if ($('.product_discountprice font b:contains("VIP Price:")')) {
        $('.product_discountprice font b p').css("display","none");
    }
});
</script>

but it did not work. So please help.

Upvotes: 2

Views: 589

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115202

The condition if would be always true since an object(jQuery) is a truthy value in JavaScript. Although $('.product_discountprice font b p') would select all elements since which is not related to the if condition.

Instead, combine the selector and apply CSS to the element.

$('.product_discountprice font b:contains("VIP Price:") p').css("display","none");


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_discountprice" id="product_discountprice1">
  <font color="red">
    <b style="font-size: 20px; font-weight: bold;">VIP Price:
            <p class="listpriceonGrid">List Price</p>
        </b>
  </font>
  <font class="pricecolor colors_productprice">$63.00</font>
</div>

<script type="text/javascript">
  $(window).load(function() {
    if ($('.product_discountprice font b:contains("VIP Price:")')) {
      $('.product_discountprice font b p').css("display", "none");
    }
  });
</script>

Upvotes: 1

Related Questions