Hide a row if value returned is empty

Question

I feel a little stupid asking this question but for some reason I cant for the life of me think on how to do what I want.

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

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

HTML (Held in my CMS system):

<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 doing:

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

but this adds white space between the row above and below this row.

I'm up for any suggestions whether it be JavaScript, JQuery, CSS or if can be done, using HTML (although I don't think it can be done this way).

I can't add any code to my CMS so it needs to be done in my code.

My site is using Twitter Bootstrap

Answer 1

You can test if 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 have 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'm doing is check all the children of the rows and if both are empty hide the row.

Hope it's helps!