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.

Solution 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.

Solution 2

This jquery code will do it

$(function(){
  $(".price").each(function(){
    if($(this).html()=="")
      $(this).parent(".pricetag").hide();
  });
});

jsbin example : http://jsbin.com/ovagus

Solution 3

The :empty selector does not select a element if it contains whitespaces. If that is a problem then you can trim the element from whitespaces:

function isEmpty(element){
  return !$.trim(element.html())
}

$(".box").each(function() {
  var box = $(this);
  var body = box.find(".box-body");

  if(isEmpty(body)) {
    console.log("EMPTY");
    box.hide();
  } 
});

http://codepen.io/DanAndreasson/pen/jWpLgM

Solution 4

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

Solution 5

working demo http://jsfiddle.net/mm4pX/1/

You can use .is(':empty') to check if div is empty and then make parent div hidden.

Hope this helps,

code

$('.price').each(function() {
    if $('.price').is(':empty') $(this).parent().hide()
});​

View more solutions