Hide row if return value is empty

Question

I feel a little silly asking this question, but for some reason I am inclined to think that life is thinking about how to do what I want.

I have a <div class="row"> in which there is my field label and field.

I want to completely hide this line if the value of my field is returned as empty.

HTML (posted on my CMS):

 <div id="rollNumber" class="row"> <label class="col-sm-offset-2 col-sm-3 control-label">[!RollNumberLabel]</label> <div class="col-sm-2 form-control-static">[!RollNumber]</div> </div> 

View code:

 if (newBankdetails.RollNumber != null && newBankdetails.RollNumber != "") { template.Nvc.Add("[!RollNumberLabel]", "Roll number"); template.Nvc.Add("[!RollNumber]", newBankdetails.RollNumber); } 

I tried to do:

 template.Nvc.Add("[!RollNumberLabel]", ""); template.Nvc.Add("[!RollNumber]", ""); 

but this adds a space between the line above and below this line.

I am for any suggestions, whether it be JavaScript, JQuery, CSS or, if possible, using HTML (although I do not think that this can be done so).

I cannot add code to my CMS, so this needs to be done in my code.

My site uses Twitter Bootstrap

Answer 1

You can check if the label text is empty or not.

 $(function() { $(".row").each(function() { if ($("label", this).text() == "" ) { $(this).hide(); } }); }); 

Working demo: http://jsfiddle.net/m7nytbw4/

Answer 2

I created an example for you http://jsfiddle.net/gon250/x8m6jLLo/

 $(".row").each(function(){ var $row = $(this); var $childern = $row.children(); if($childern.length > 1) { if($childern[0].innerText === "" && $childern[1].innerText === "") { $row.hide(); } } }); 

basically what i am doing is checking all child lines and if both are empty hide the line.

Hope this helps!

Answer 3

Use the CSS display style property to hide the string.

 $("#rollNumber").css("display", "none"); 

Answer 4

I'm not sure if this is the solution for your problem, but with jQuery and regex you can do something like this:

 $('.row').each(function(){ var row = $(this); if(! /^[a-zA-Z0-9]+$/.test(row.find('label'))){ // No alphabetical characters found row.css('display','none'); } });