Hide sold out products

Site URL: https://www.indiecovershop.com/

Hey there,

I have a client that wants to hide products that are sold out.

I tried this CSS bit but I'm left with a black space on the row where the product was.

#productList .sold-out{ display: none; }

Is there a way to rearrange the products once a product is hidden, or does someone know a better way to do this?

Thanks!

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    $("#productList .sold-out").remove();
});
</script>