javascript - hiding parent when a span contains no content -
i've been , down site , various questions related this, cannot find resolution this.
i'm try hide parent div "row" whenever 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" used pull data of 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 jquery
$("#specvalue:empty").parent().hide();
nothing has worked far, i've tried placing script inside <head>
tag, , below after tech documents called.
do think need more specific css? see works on other examples, not on this.
i've removed duplicate id="row"
, replaced id="specvalue"
class="specvalue"
. simple jquery i've hidden rows empty specvalue.
note: keep in minde id's always have unique within 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>
Comments
Post a Comment