title: How do I hide a div based on whether another div is present on a page?
body: <p>I'm trying to hide a div based on the presence of another div on the page.</p>
  
  <p>Heres my HTML &amp; JavaScript:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="coachtwocol"&gt;
    &lt;div id="coach2"&gt;
      &lt;div class="et_pb_blurb_content"&gt;
        &lt;div class="et_pb_blurb_container"&gt;
          &lt;h4&gt;&lt;span&gt;Coach:&lt;/span&gt;&lt;/h4&gt;
          &lt;div class="et_pb_blurb_description"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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)</p>
  
  <p>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.</p>