当值为空或空时隐藏DIV

流浪的开发者

从经典的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页面完成,至少这是我希望的方式...

莫巴拉克·阿里

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

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章