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 pletely 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

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 pletely 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

• javascript
• jquery
• html
• css
• twitter-bootstrap

4 Answers 4

You can test if label text is empty or not.

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

Working demo: http://jsfiddle/m7nytbw4/

I have created an example for you http://jsfiddle/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!

Use CSS display style property to hide the row.

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

I am not sure if this is a overkill solution for your problem, but with jQuery and regex you could 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');
  }
});