How to hide a div if another has no content

by

I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display

My attempt

$(document).ready(function() {
  if (!$.trim($(".plant_profile_link").html()) == true)
    $(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
  <div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body  et_pb_text_align_left et_pb_bg_layout_light">


  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

2 thoughts on “How to hide a div if another has no content”

  1. Your code works if we add jQuery

    I would user toggle

    $(function() {
   $(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
  <div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body  et_pb_text_align_left et_pb_bg_layout_light">


  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>

  <div class="et_pb_text_inner">
    <div class="plant_profile_link"></div>
  </div>
    Reply

Leave a Comment