如果子 div 为空，则隐藏父 div答案

【问题标题】：Hide parent div if an child divs are empty如果子 div 为空，则隐藏父 div
【发布时间】：2020-06-28 19:36:12
【问题描述】：

我有这三列行，想隐藏两个空列。

<div class="wp-block-columns">
   <div class="wp-block-column">
      <div class="wp-block-image">content</div>
      <div class="tb-field">content</div>
      <div class="tb-field">content</div>
      <div class="tb-button>content</div>
   </div>
   
   <div class="wp-block-column">
      <div class="wp-block-image"> </div>
      <div class="tb-field"> </div>
      <div class="tb-field"> </div>
      <div class="tb-button> </div>
   </div>

   <div class="wp-block-column">
      <div class="wp-block-image"> </div>
      <div class="tb-field"> </div>
      <div class="tb-field"> </div>
      <div class="tb-button> </div>
   </div>

</div>

我尝试了这个和其他一些变体，但没有任何运气。

jQuery('.wp-block-column') // find the parent
.hide() // hide it
.find('> div:not(:empty)') // find child divs that are not empty
.each(function() { // use each in order to prevent errors when set is empty

jQuery(this).parent().show(); // show the parent of this non-empty element
return false; // stop processing this each
})
    ;

【问题讨论】：

你的代码在这个小提琴jsfiddle.net/jqwez0p1中工作后，将缺少的关闭“添加到带有类 tb-button 的元素。

标签： html jquery css wordpress

【解决方案1】：

我无法了解您的代码未按您希望的方式运行。我只注意到我必须修复 div.tb-button 标记的 html。它需要结束双引号。

话虽如此，为什么不尝试对文本的修剪版本进行测试，看看它是否为空。它将更少地穿越 DOM，并且使用更少的代码来管理更快。

jQuery('.wp-block-column').each(function () {
    var $this = jQuery(this);
    $this.text().trim() === '' && $this.remove();
});

如果您愿意，可以将“remove”（从 DOM 中删除元素）替换为“hide”（在元素上显示：“none”）。

【讨论】：

非常感谢。完美运行！

【解决方案2】：

试试这个。

jQuery('.wp-block-column').each(function(){
  var current_column = jQuery(this);
  var image = current_column.find('.wp-block-image');
  var field = current_column.find('.tb-field');
  var button = current_column.find('.tb-button');
  
  if(jQuery.trim(image.html()) == 0){
    current_column.hide();
  }
  if(jQuery.trim(field.html()) == 0){
    current_column.hide();
  }
  if(jQuery.trim(button.html()) == 0){
    current_column.hide();
  }
});

【讨论】：

【解决方案3】：

我应该这样做：

function checkIfEmpty(parentid, childid){ if (document.getElementById(childid).innerHTML == "") { document.getElementById(parentid).style.display = 'none'; } }

我希望这就是你要找的东西

【讨论】：