Question

在传统的ASP .NET应用程序中，我正在向引导网页提供一堆值。在此网页中，我将在<div>元素中显示数据：

<div class="row">
  <div class="col"><strong>Address</strong>:</div>
  <div class="col-3">Beverly Hills 90210</div>
  <div class="col"><strong>Phone</strong>:</div>
  <div class="col-7">+1 1 11111111</div>
</div>

想法是当内容为空时隐藏这些字段（包括它们的标签）。

我当然可以通过.NET做到这一点，但是我想知道是否可以使用JavaScript做到这一点？数据是通过.NET加载的，但是显示应该由生成的HTML页面完成，至少这是我希望的方式...

Answer 1

div:empty { display: none }

一种更清洁的方法是仅使用CSS。上面的样式将隐藏为空的div。

:empty选择器匹配每个没有子元素的元素（包括文本节点）。

如果CSS能解决问题，请避免使用JS！

Answer 2

以下是您可以实现的简单脚本：

var divs = document.querySelectorAll('.row > div');
divs.forEach(function(element) {
   var text = element.textContent;
   if (text === '') {
    element.style.display = 'none';
   }
});

<div class="row">
  <div class="col"><strong>Address</strong>:</div>
  <div class="col-3">Beverly Hills 90210</div>
  <div class="col"><strong>Phone</strong>:</div>
  <div class="col-7"></div>
</div>

Answer 3

当内容为空时，此代码将隐藏空白字段（包括其标签）。此代码将隐藏带有空值的电子邮件标题。

let empty = document.querySelectorAll('.row > div');

empty.forEach(function(element) {

  if (element.textContent === '') {
    element.previousElementSibling.style.display = 'none';
    element.style.display = 'none';
  }
});

<div class="row">
  <div class="col"><strong>Address</strong></div>
  <div class="col-3">Beverly Hills 90210</div>
  <div class="col"><strong>Phone</strong>:</div>
  <div class="col-7">+1 1 11111111</div>
  <div class="col"><strong>Email</strong>:</div>
  <div class="col-8"></div>
</div>

Answer 4

花了点时间修改，但最终我找到了解决方案。我需要略微修改Ali的答案以使其正常运行，但最终...

<script>
  let empty = document.querySelectorAll('.row > div');

  // Debug
  console.log("Code was run.")

  empty.forEach(function(element) {
    if (element.textContent === '') {
      element.previousElementSibling.style.visibility = 'hidden';
      element.style.visibility = 'hidden';
    }
  });
</script>

设置.style.display ='none'会使某些元素向右移动，从而弄乱了页面的布局。通过设置.style.visibility ='hidden'，我得到了预期的效果。

Answer 5

我实现了代码，并且可以正常工作，但是...

该网站是多语言的，因此所有内容都可以以8种语言显示，因此测试人员尝试了以下操作：

登录语言1.执行新代码
返回首页
更改语言并重新执行代码。

在某些语言中，我仍然得到带有空值的div。我调试并发现element.previousElementSibling等于 null 。

我设法通过在上述空值上添加测试来解决此问题：

if (element.previousElementSibling != null) {
   element.previousElementSibling.style.display = 'none';
}

使用此代码，代码可以再次工作，但是...为什么element.previousElementSibling突然为null？唯一的区别是标签中加载的文本，并且对于我遇到问题的语言，它们不包含任何奇怪的字符。

当值为空或空时隐藏DIV

5 个答案: