Как удалить родительский div, если есть только элемент h3 и пустые div содержимого

Question

У меня есть div с классом .tour_head1, и всегда есть элемент h3 и множество div с контентом. Я хочу проверить, имеет ли tour_head1 только элемент h3 и элементы без содержимого, а затем удалить весь элемент 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

Чтобы также проверить текстовые значения (для случаев, когда присутствуют пустые дочерние элементы), сделайте следующее:

$('.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

Answer 2

попробуйте это с помощью jquery remove

<div class="tour_head1">
  <h3>Description</h3>
     <div> <p>&nbsp; some text</p> </div>
       <div></div>
 </div>
 <div class="tour_head1">
  <h3></h3>
     <div> <p>&nbsp; some text 2</p> </div>
       <div></div>
 </div>
 <div class="tour_head1">
  <h3>Description</h3>
     <div> <p>&nbsp; some text</p> </div>
       <div></div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script>
 $(document).find('.tour_head1').find("h3").each(function(){
  console.log($(this).text());
  if($(this).text() == "" || $(this).text() == null)
  {
    $(this).remove();
  }
});
 </script>