Скрыть строку, если возвращаемое значение пусто

Я чувствую себя немного глупо, задавая этот вопрос, но по какой-то причине я не могу думать о том, как делать то, что я хочу.

у меня есть <div class="row"> который имеет мою метку поля и поле в нем.

Я хочу, чтобы полностью скрыть эту строку если значение моего поля возвращается как пустая.

HTML (хранится в моей системе 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>

Просмотр кода:

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

Я попытался делать:

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

но это добавляет пробел между строкой выше и ниже этой строки.

Я готов к любым предложениям, будь то JavaScript, JQuery, CSS или если это можно сделать, используя HTML (хотя я не думаю, что это можно сделать таким образом).

Я не могу добавить код в свою CMS, поэтому это нужно сделать в моем коде.

мой сайт использует Twitter Bootstrap

6
css html javascript jquery twitter-bootstrap

4 ответов

вы можете проверить, является ли текст метки пустым или нет.

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

рабочая демо: http://jsfiddle.net/m7nytbw4/

2

Я создал для вас пример 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();
        }
    }
});

в основном то, что я делаю, это проверить все дочерние элементы строк, и если оба пусты, скрыть строку.

надеюсь, это поможет!

2

используйте свойство стиля отображения CSS, чтобы скрыть строку.

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

Я не уверен, что это излишнее решение для вашей проблемы, но с jQuery и regex вы можете сделать что-то вроде этого:

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