How to hide product item if the price is 0-CodePudding

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" >
    <div >
       <div  style="display: block;">
          <div >
             <img  src="/Uploads/" alt="">
          </div>
          <div  data-id="5637" data-variant-id="11091">
             <div  data-id="5637"><a title="" href="/"></div>
             <div >
                <div >
                   <span>
                   ₺1.950,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div >
       <div  style="display: block;">
          <div >
             <img  src="/Uploads/" alt="">
          </div>
          <div  data-id="5637" data-variant-id="11091">
             <div  data-id="5637"><a title="" href="/"></div>
             <div >
                <div >
                   <span>
                   ₺1.250,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div >
       <div  style="display: block;">
          <div >
             <img  src="/Uploads/" alt="">
          </div>
          <div  data-id="5637" data-variant-id="11091">
             <div  data-id="5637"><a title="" href="/"></div>
             <div >
                <div >
                   <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");            
    }

CodePudding user response：

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 >
  <div >
    <div >
      <span>
                   ₺1.250,00
                   </span>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <span>
                   ₺0
                   </span>
    </div>
  </div>
</div>