jQuery hide parent div if child div is empty

Question

I've looked around and found a lot of questions about this, but none of the solutions work for me. I have a structure like this:

<div class="pricetag">
    <div class="price">400</div>
</div>

<div class="pricetag">
    <div class="price"></div>
</div>

<div class="pricetag">
    <div class="price">250</div>
</div>

What I want to do is to hide the .pricetag where .price doesn't contain anything. It can be a lot of different .pricetag's on the same page but I just want to hide the ones with empty .price.

Is this possible with jQuery? I've tried a lot of different scripts but none have worked properly.

Answer 1

You can use the :empty selector and the parent method, assuming the empty .price elements will never contain any text nodes (e.g. a new line character):

$(".price:empty").parent().hide();

Here's a working example.

Answer 2

$('.price').each(function(){
  if ($(this).text().length == 0) {
    $(this).parent().hide()
  }
})