How do I hide a div based on whether another div is present on a page?

Question

I'm trying to hide a div based on the presence of another div on the page.

Heres my HTML & JavaScript:

// IIFE to enable `$` as jQuery
;
(function($) {
  // document ready
  $(function() {
    $(document).ready(function() {
      var $description = document.querySelector("#coach2.et_pb_blurb_description");
      if ($description.length) {
        $('#coachtwocol').hide();
      }
    });
  })(jQuery);

<div id="coachtwocol">
  <div id="coach2">
    <div class="et_pb_blurb_content">
      <div class="et_pb_blurb_container">
        <h4><span>Coach:</span></h4>
        <div class="et_pb_blurb_description"></div>
      </div>
    </div>
  </div>
</div>

The idea is to hide #coachtwocol if .et_pb_blurb_description is not present under #coach2 (the div .et_pb_blurb_description is not loaded on to the page if it is not filled in on the back end)

I believe the issue lies in my query selector but I'm not sure what I'm doing wrong with it or how to troubleshoot it.

is this line copy and paste error? `$(document).ready(function() {` — developer, May 05 '20 at 14:59
Your logic has two document readies in it. You only need one, and you can use `jQuery(function($){})` to avoid the outer IIFE. — Taplar, May 05 '20 at 15:00
Does this answer your question? [Check if a div exists with jquery](https://stackoverflow.com/questions/6899175/check-if-a-div-exists-with-jquery) — WOUNDEDStevenJones, May 05 '20 at 15:23

Mitya · Answer 1 · 2020-05-05T15:32:29.257

2

#coach2.et_pb_blurb_description looks for a SINGLE element that both has the ID "coach2" AND the class "et_pb_blurb_description".

That is not the case. You're dealing with two elements, one the child of the other, so you need a space in your selector.

document.querySelector('#coach2 .et_pb_blurb_description')...

[EDIT]

OK, if it's still not working then it's time for some debugging. With selectors, never assume they're matching what you think they do/should. So let's test them. I'll also harmonise them both to use jQuery, since you appear to use it for one and not the other.

  let $description = $("#coach2.et_pb_blurb_description"),
      toHide = $('#coachtwocol');
  if ($description.length) {
      console.log('Found selector 1');
      if (toHide.length) {
          console.log('Found selector 2');
          toHide.hide();
      }
  }

edited May 05 '20 at 15:32

answered May 05 '20 at 15:00

Mitya

33,629
9
60
107

Err, so you kinda left out that they were not using jQuery to do the lookup... – Taplar May 05 '20 at 15:01
You need the class selector on `et_pb_blur_description` – WOUNDEDStevenJones May 05 '20 at 15:04
Hi Utkanos, I have tried this code before (using a space between the id and the class) with no luck, I assume this is meant to be "$('#coach2 .et_pb_blurb_description')" – Josh Stapleton May 05 '20 at 15:15
Yeap, shoddy on my part, I rushed it. Now corrected. Yes, Josh, you assume correct. – Mitya May 05 '20 at 15:23
@Utkanos thanks for confirming but this code still doesn't seem to be working for me? any other ideas what could be going wrong? Thanks for the response btw :) – Josh Stapleton May 05 '20 at 15:26
@Utkanos thanks for the response again, this still doesn't seem to be working, I tried: `````` and can't see anything in the console. (sorry, I don't know how to paste that code to look better) – Josh Stapleton May 06 '20 at 10:53
OK so if you don't see anything in the console then there's wider issues. Your script is possibly running before the DOM has loaded, so try encapsulating it in a DOM-ready event callback. If that fails, try to recreate the problem in a JS Fiddle or similar. – Mitya May 06 '20 at 11:01

WOUNDEDStevenJones · Answer 2 · 2020-05-05T15:17:51.143

You have a couple typos in your code that are leading to odd behavior. First, like @Utkanos mentioned #coach2.et_pb_blurb_description is looking for an element like <div id="coach2" class="et_pb_blurb_description"> which doesn't exist. You likely want to use the selector with a space like #coach2 .et_pb_blurb_description to select any elements with a class of eb_pb_blurb_description which are children of an element with an ID of coach2.

If you currently run your script, you get the error: Uncaught SyntaxError: Unexpected end of input because you're missing a set of closing )}. Additionally, you have multiple onready functions with slightly different syntax that can be cleaned up.

Removing duplicate onready functions and fixing your selector:

// IIFE to enable `$` as jQuery
(function($) {
  var $description = $("#coach2 .et_pb_blurb_description");
  if ($description.length) {
    console.log('description exists');
    $('#coachtwocol').hide();
  } else {
    console.log('description does not exist');
  }
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coachtwocol">
  <div id="coach2">
    <div class="et_pb_blurb_content">
      <div class="et_pb_blurb_container">
        <h4><span>Coach:</span></h4>
        <div class="et_pb_blurb_description"></div>
      </div>
    </div>
  </div>
</div>

Hi @WOUNDEDStevenJones I've tried this code in JSFiddle and it works fine but for some reason, there is an issue when trying to implement it on the website. I'm getting "Uncaught TypeError: Cannot read property 'concat' of undefined" in the console. — Josh Stapleton, May 06 '20 at 14:39
Nothing with this script includes concatenation (or a property named `concat`), so that sounds like it's a different line of code that's giving you a problem. Can you look in your code for `concat` or `.concat`? The error message should also include a line number that will point you to where it's failing. Likely you have something like `test.concat` but `test` is undefined, so it's throwing that error. — WOUNDEDStevenJones, May 06 '20 at 15:07

score 0 · Answer 3 · answered May 05 '20 at 15:09

Try this below code works for you

<DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
     $(document).ready(function() {
        var $description = document.querySelectorAll("#coach2");
        if ( $description.length>=0){
            $('#coachtwocol').hide();
        }
    });
</script>
<body>
    <div id="coachtwocol">
        <div id="coach2">
          <div class="et_pb_blurb_content">
                <div class="et_pb_blurb_container">
                      <h4><span>Coach:</span></h4>
              <div class="et_pb_blurb_description"></div>
                  </div>
              </div>
          </div>
      </div>
</html>

How do I hide a div based on whether another div is present on a page?

3 Answers3