Remove whole parent div if contained child div is empty-CodePudding

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

<div >
   <div ><div ></div></div>
   <div ><div ></div></div>
</div>

<div >
   <div ><div ></div></div>
   <div ><div ></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 >
   <div ><div >HAS TEXT</div></div>
   <div ><div >HAS TEXT</div></div>
</div>

<div > <!-- second column text empty, remove whole row -->
   <div ><div >HAS TEXT</div></div>
   <div ><div >EMPTY</div></div>
</div>

<div > <!-- second column text empty, remove whole row -->
   <div ><div >HAS TEXT</div></div>
   <div ><div >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?

CodePudding user response：

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.

CodePudding user response：

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