Question

如果他的孩子不包含内容，我想隐藏父元素。

它没有给我任何错误，但是根本不起作用...

我的代码是

function hasElement(child, parent) {
  if (!child.length) {
    parent.classList.add('hidden');
  }
}

function hideGallery() {
  var child = document.querySelectorAll('.test'),
    parent = document.querySelectorAll('.row');
  if (parent === null) {
    return;
  }
  hasElement(child, parent);
}
  hideGallery()

.hidden { display:none }

.test { height:100px; width:100px; background-color:red }

<div class="row">
  <div class="col">img
    <img src="1.png" alt="" class="img">
  </div>
  <div class="col test"></div>
</div>

Answer 1

尝试使用:empty CSS伪类

注意：它不适用于空格

if (document.querySelectorAll('.col:empty').length) {
  document.querySelectorAll('.row')[0].classList.add('hidden')
}

.test:empty {
  display: none;
}

.hidden {
  display: none
}

<div class="row">
  <div class="col">
    <img src="1.png" alt="img" class="img">
  </div>
  <div class="col test"></div>
</div>

Answer 2

您的变量child和parent是数组。您可以使用document.querySelector()或document.querySelectorAll()[0]来解决此问题。

Answer 3

一个简单的方法是遍历父母并直接检查循环中的孩子。如果孩子的长度为0，则添加隐藏的类。

function hideEmptyParents(){
  const parent = document.querySelectorAll('.row');
  parent.forEach(p => {
    const children = p.querySelectorAll('.col');
    if(children.length == 0) p.classList.add('hidden');
  })
}

如果不包含子元素，则隐藏父元素-Javascript

3 个答案: