How to hide product item if the price is 0

Question

Some of my products have 0 price. Until I fix this issue I want to hide those products from collection pages.

So,

How can I hide the.productItem or.ItemOrj if the.productPrice span is == ₺0,00, else show

Look code below:

    <div id="ProductPageProductList" class="ProductList sort_4">
    <div class="ItemOrj col-4">
       <div class="productItem" style="display: block;">
          <div class="productImage">
             <img class="resimOrginal lazyImage" src="/Uploads/" alt="">
          </div>
          <div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
             <div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
             <div class="productPrice ">
                <div class="discountPrice">
                   <span>
                   ₺1.950,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div class="ItemOrj col-4">
       <div class="productItem" style="display: block;">
          <div class="productImage">
             <img class="resimOrginal lazyImage" src="/Uploads/" alt="">
          </div>
          <div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
             <div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
             <div class="productPrice ">
                <div class="discountPrice">
                   <span>
                   ₺1.250,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div class="ItemOrj col-4">
       <div class="productItem" style="display: block;">
          <div class="productImage">
             <img class="resimOrginal lazyImage" src="/Uploads/" alt="">
          </div>
          <div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
             <div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
             <div class="productPrice ">
                <div class="discountPrice">
                   <span>
                    ₺0,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

I have also tried but not worked:

    var amount = parseFloat($('.productPrice span').html().replace(",", "."));
    if(amount === 0){
        $('.productItem').css("display", "none");
    }else{
        $('.productItem').css("display", "block");            
    }

Answer 1

I stripped out the additional HTML for my answer since it doesn't affect my answer.

But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.

 $(document).ready(function(){ $(".productItem").each(function(){ let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,"")); if(price == 0){ $(this).hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="productItem"> <div class="productPrice "> <div class="discountPrice"> <span> ₺1.250,00 </span> </div> </div> </div> <div class="productItem"> <div class="productPrice "> <div class="discountPrice"> <span> ₺0 </span> </div> </div> </div>