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.

Will each `.pricetag` element only ever have one `.price` element? — Anthony Grist, Jul 02 '12 at 08:49
I insert fr. in the beginning and :- at the end of each .pricetag. So if .price has content it is
fr.
200
:-
. If .price is empty it is
fr.
:- — Daniel, Jul 02 '12 at 08:52

score 20 · Accepted Answer · answered Jul 02 '12 at 08:50

20

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.

answered Jul 02 '12 at 08:50

James Allardice

164,175
21
332
312

This fixed it! Thank you very much! I've only tried using if statements to check if the div is empty. Thanks again. I'll mark this as the answer as soon as I'm allowed to do it :) – Daniel Jul 02 '12 at 08:56
Clever way of doing it. I was unaware of the `:empty` selector. Thanks – Clyde Lobo Jul 02 '12 at 10:04
@ClydeLobo - You're welcome :) Just be aware that a single space, or new line, or anything else between the start tag and end tag will count as a text node, which means the `:empty` selector will not match it. – James Allardice Jul 02 '12 at 10:05
@JamesAllardice : That I am already aware of. Thanks anyways :) – Clyde Lobo Jul 02 '12 at 10:54

score 2 · Answer 2 · answered Jul 02 '12 at 08:52

2

This jquery code will do it

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

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

answered Jul 02 '12 at 08:52

Clyde Lobo

9,126
7
34
61

score 1 · Answer 3 · answered Jul 02 '12 at 08:49

1

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

answered Jul 02 '12 at 08:49

Ram

143,282
16
168
197

score 1 · Answer 4 · answered Jul 02 '12 at 08:51

1

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

answered Jul 02 '12 at 08:51

Tats_innit

33,991
10
71
77

There's no need to iterate over all the `.price` elements. The `parent` and `hide` methods apply to all elements in the matched set. – James Allardice Jul 02 '12 at 08:54
@JamesAllardice Aha thank-you `:)` I was actually reading the post above, cool, cheers for that! – Tats_innit Jul 02 '12 at 08:55

score 1 · Answer 5 · answered Jul 02 '12 at 09:03

1

try this jQuery script

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

answered Jul 02 '12 at 09:03

RRcom Resty

99
2

score 1 · Answer 6 · answered Feb 02 '16 at 08:38

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

jQuery hide parent div if child div is empty

6 Answers6

Linked