jquery - 如果只有 h3 元素和空内容 div，如何删除父 div

Question

我有一个带有 .tour_head1 类的 div，并且始终有一个 h3 元素和许多带有内容的 div。我想检查 tour_head1 是否只有 h3 元素和没有内容的 div，然后删除整个 div .tour_head1

HTML

<div class="tour_head1">
  <h3>Description</h3>
     <div> <p>&nbsp;</p> </div>
       <div></div>
 </div>

JQuery

$('.tour_head1:has(h3:only-child)').filter(function() {
  return !this.textContent.trim();
}).remove();
});

Answer 1

您必须检查是否有一个嵌套 div 不为空:

$('.tour_head1:has(h3)').each(function() {  // :has(h3) may not be necessary
    if (!$(this).find('div').not(':empty').length) {
        $(this).remove();
    }
});

<强> Fiddle demo

要检查文本值(对于存在空子元素的情况)，请执行以下操作:

$('.tour_head1:has(h3)').each(function() {
    let contentFound = false;

    $(this).find('div').each(function() {
        if ($(this).text() !== '') {
            contentFound = true;
        }
    });

    if (!contentFound) {
        $(this).remove();
    }
});

<强> Fiddle demo 2