hiding parent when a span contains no content

Question

I've been up and down the site and various questions related to this, I cannot find a resolution for this.

I'm try to hide my parent div "row" whenever my span "specvalue" contains no data

    <div class="container-fluid" id="itmSpecsTbl">
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Accuracy</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem1','')%></span> </div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Drive Type</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem2','')%></span> </div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Free Speed</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem4','')%></span> RPM</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Increments</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem5','')%></span> </div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Length</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem6','')%></span> In</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Length</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem7','')%></span> mm</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Air Consumption</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem8','')%></span> </div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Air Inlet (NPT)</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem37','')%></span> </div></div>  
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem9','')%></span> ft lb</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem10','')%></span> ft lb</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem11','')%></span> in lb</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem12','')%></span> in lb</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem13','')%></span> in oz</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem14','')%></span> in oz</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem15','')%></span> kgf cm</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem16','')%></span> kgf cm</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Capacity</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitemfi0073','')%></span> lbs</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Reach</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitemfi0103','')%></span> in</div></div>
 <div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Reach</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitemfi0104','')%></span> in</div></div> 
</div>

The "getAttribute" is used to pull data of my items, when there's no data. it's blank - no spaces, nothing.

I've tried using :empty, :blank

#specvalue:empty #row, #specvalue:blank #row { display: none; }

This got me nowhere, same with jquery

$("#specvalue:empty").parent().hide();

Nothing has worked so far, I've even tried placing the script inside the <head> tag, and even below after the tech documents are called.

Do you think I need to be more specific with the CSS? I see it works on other examples, but not on this.

Answer 1

You can do this in CSS, your problem is that you are using the same id attribute for each span. An id must be unique for the whole document (see this). Use a class instead like this:

<span class="specvalue"><%=getAttribute('item','127559','custitem1','')%></span>

And the CSS:

.specvalue:empty {
    display: none;
}

Answer 2

So Like in your comment said already: ID's are Unique so use classes.

Here your solution: JSFiddle

HTML:

<div class="container-fluid" id="itmSpecsTbl">

<div class="row">
  <div class="col-xs-6" align="left">
    <b>Accuracy</b>
  </div>
  <div class="col-xs-6" align="right">
    <span class="specvalue"></span>
  </div>
</div>

<div class="row">
  <div class="col-xs-6" align="left">
    <b>Drive Type</b>
  </div>
  <div class="col-xs-6" align="right">
    <span class="specvalue"></span>
  </div>
</div>

<div class="row">
  <div class="col-xs-6" align="left">
    <b>Free Speed</b>
  </div>
  <div class="col-xs-6" align="right">
    <span class="specvalue">RPM</span>
    </div>
  </div>

<div class="row">
  <div class="col-xs-6" align="left">
    <b>Increments</b>
  </div>
  <div class="col-xs-6" align="right">
    <span class="specvalue"></span>
  </div>
</div>

</div>

Js:

var rows = $('#itmSpecsTbl .row');

$.each(rows, function(i, e){
    if($(e).find('.specvalue').text() === ''){
    $(e).hide();
  }
});

Answer 3

All of your IDs are identical for each type of element - dont do that! Once you have fixed that, you will need to use the class as the selector, and then you could do something like this in jQuery:

if ($('.row').is(':empty')){
    $(this).parent()hide().
}

This then checks each element with the class row, and if it has no content, it gets that elements parent and hides it.

Answer 4

I've removed the duplicate id="row" and replaced id="specvalue" with class="specvalue". Then with some simple jquery I've hidden all rows with empty specvalue.

Note: always keep in minde id's always have to be unique within the full html page!

$('.specvalue').each(function(i, v) {
  if ($(this).html() === '') {
    $(this).closest('.row').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="itmSpecsTbl">
  <div class="row">
    <div class="col-xs-6" align="left"><b>Accuracy</b> 
    </div>
    <div class="col-xs-6" align="right"><span class="specvalue">A</span> 
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6" align="left"><b>Drive Type</b> 
    </div>
    <div class="col-xs-6" align="right"><span class="specvalue"></span> 
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6" align="left"><b>Free Speed</b> 
    </div>
    <div class="col-xs-6" align="right"><span class="specvalue">B</span> RPM</div>
  </div>
</div>