CODEWITHSUNDEEP
jqueryhtmlhideparent
Daniel
Daniel

Reputation: 1555

jQuery hide parent div if child div is empty

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.

Upvotes: 7

Views: 23952

Answers (6)

Dan Andreasson
Dan Andreasson

Reputation: 16202

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

Upvotes: 1

RRcom Resty
RRcom Resty

Reputation: 99

try this jQuery script

$(document).ready(function(e)
{
    $('div.pricetag').each(function(key, value)
    {
        if(!$('div.price', value).html()) $(value).hide();
    });
});

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

This jquery code will do it

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

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

Upvotes: 2

Tats_innit
Tats_innit

Reputation: 34107

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()
});​

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

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.

Upvotes: 20

Ram
Ram

Reputation: 144689

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

Upvotes: 1

Related Questions