Remove whole parent div if contained child div is empty

Question

I'm trying to achieve the following:

I have multiple divs with the class "et_pb_row_inner" that contain two columns each. Each of the columns contain a text container with the class "et_pb_text".

Here's the basic 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>

I need a way to check if the text in the second column of each row is empty and if so remove the whole row. Like so:

<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>

I found a code snippet and tried the following:

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

It kind of works, but it removes ALL divs with the class "et_pb_row_inner", not just the ones that contain the empty text div.

I guess it's just tweaking the code a little, but I can't get it working.

Any ideas?

Answer 1

Try accessing the _inner div using the Child Nodes of the div with no text. You can run the _inner class selector on these with the .find function on the parent div.

Answer 2

try this:

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

this should point to the .et_pb_row_inner currently in iteration

Answer 3

You could use the :contains selector to achieve what you require in a single line of code. The caveat here is that it's a greedy match, ie. in this case it would also match 'NOT EMPTY'. I'll leave that as a matter for the OP to determine if this fits their use case.

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

Answer 4

Try this:

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