Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide a row if value returned is empty

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

like image 285
murday1983 Avatar asked May 15 '15 11:05

murday1983


2 Answers

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/

like image 111
Radonirina Maminiaina Avatar answered Oct 19 '22 09:10

Radonirina Maminiaina


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!

like image 39
gon250 Avatar answered Oct 19 '22 09:10

gon250