JQuery: Showing / Hiding html tags if another tag is empty or not

Question

Hi, this is my first time posting here, I have a question which I have searched high and low for and so far cannot find a working answer.

The HTML would be as follows:

<span class="label">Label:</span>
<span class="value">{{Value}}</span>

Basically, {{Value}} is a variable inserted (or not) via php/mysql.
Of course if {{Value}} is empty, you get the following when the page is rendered:

<span class="label">Label:</span>
<span class="value"></span>

The idea is for Label: to be hidden if there is nothing in {{Value}}.

I have tried various examples using $(.value:empty) & if statements but it hides .label regardless.

Any suggestions are welcome.
Thanks in advance,
Rob

Answer 1

Try

if ($('.value').text() == '') { $('.label').hide(); }

Answer 2

$(".value").each(function(){
  var value = $.trim($(this).text())
  if(value == ""){
    $(this).prev(".label").hide()
  }
})

PS. A good idea will be to encapsulate the .label .value pair into some sort of LI or DIV