如果包含的子 div 为空，则删除整个父 div

Question

我正在努力实现以下目标：

我有多个 div，每个 class“et_pb_row_inner”包含两列。每个列都包含一个带有 class“et_pb_text”的文本容器。

这是基本的 html:

<div class="et_pb_row_inner">
   <div class="et_pb_column"><div class="et_pb_text"></div></div>
   <div class="et_pb_column"><div class="et_pb_text"></div></div>
</div>

<div class="et_pb_row_inner">
   <div class="et_pb_column"><div class="et_pb_text"></div></div>
   <div class="et_pb_column"><div class="et_pb_text"></div></div>
</div>

<div class="et_pb_row_inner">
   <div class="et_pb_column"><div class="et_pb_text"></div></div>
   <div class="et_pb_column"><div class="et_pb_text"></div></div>
</div>

我需要一种方法来检查每行第二列中的文本是否为空，如果是，则删除整行。像这样：

<div class="et_pb_row_inner">
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
</div>

<div class="et_pb_row_inner"> <!-- second column text empty, remove whole row -->
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
   <div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>

<div class=".et_pb_row_inner"> <!-- second column text empty, remove whole row -->
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
   <div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>

我找到了一个代码片段并尝试了以下操作：

$(function() {
    $('.et_pb_row_inner').each(function() {
        if ($('.et_pb_text', this).text() == "" ) {
            $('.et_pb_row_inner').hide();
        }
    });
});

它有点工作，但它会删除所有带有 class“et_pb_row_inner”的 div，而不仅仅是包含空文本 div 的那些。

我想这只是稍微调整了代码，但我无法让它工作。

有什么想法吗？

Answer 1

尝试使用 div 的子节点访问 _inner div，不带文本。您可以运行 _inner class 选择器与父 div.

上的 .find 函数

Answer 2

试试这个：

    $('.et_pb_row_inner').each(function() => {
        if ($('.et_pb_text', this).text() == "") {
            $(this).hide();
        }
    });

this 应该指向当前迭代中的 .et_pb_row_inner

Answer 3

首先，在您的 HTML 第三行中，您错误地添加了“.”。在class名字

现在下面的代码片段将完成工作

$(function() {
   $('.et_pb_row_inner').each(function(_, item) {    
        let text = $(item).children().eq(1).text();
      if(text.trim() === "EMPTY"){
        $(item).remove();    
      }
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="et_pb_row_inner">
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT1</div></div>
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
</div>

<div class="et_pb_row_inner"> <!-- second column text empty, remove whole row -->
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT2</div></div>
   <div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>

<div class="et_pb_row_inner"> <!-- second column text empty, remove whole row -->
   <div class="et_pb_column"><div class="et_pb_text">HAS TEXT3</div></div>
   <div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>

已编辑：

将 $(item).empty() 替换为 $(item).remove()

Answer 4

试试这个：

$('.et_pb_row_inner').each((idx, ele) => {
    if($($(ele).children()[1]).text() === ''){
        $(ele).hide();
    }
})

Answer 5

您可以使用 :contains 选择器在一行代码中实现您所需要的。这里需要注意的是，这是一场贪婪的比赛，即。在这种情况下，它也会匹配 'NOT EMPTY'。我会把它留给 OP 来确定这是否适合他们的用例。

$('.et_pb_row_inner:contains("EMPTY")').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="et_pb_row_inner">
  <div class="et_pb_column">
    <div class="et_pb_text">HAS TEXT</div>
  </div>
  <div class="et_pb_column">
    <div class="et_pb_text">HAS TEXT</div>
  </div>
</div>

<div class="et_pb_row_inner">
  <div class="et_pb_column">
    <div class="et_pb_text">HAS TEXT</div>
  </div>
  <div class="et_pb_column">
    <div class="et_pb_text">EMPTY</div>
  </div>
</div>

<div class="et_pb_row_inner">
  <div class="et_pb_column">
    <div class="et_pb_text">HAS TEXT</div>
  </div>
  <div class="et_pb_column">
    <div class="et_pb_text">EMPTY</div>
  </div>
</div>

如果包含的子 div 为空，则删除整个父 div

Remove whole parent div if contained child div is empty

javascript

jquery

hide