title: Do Something when a Child Element is Not Present
body: <p>I'm trying to remove a toggle function from the page when a childElement is not present. This has to be done in vanilla javascript. Unfortunately, can not use jQuery. Here's what's going on.</p>
  <p>when I run this in the console</p>
  <pre><code>let content = document.getElementById('productItemRates-1');
  console.log(content.firstElementChild);
  </code></pre>
  <p>Code snippet is returned for checking if childElement is present:</p>
  <pre><code>    &lt;div class=&quot;product-rate-card&quot;&gt;
        &lt;div class=&quot;product-rate-card-title&quot;&gt;  
          &lt;strong&gt;Clean Power&lt;/strong&gt;
          &lt;button type=&quot;button&quot; class=&quot;card-btn-plain card-tooltip&quot; data-toggle=&quot;modal&quot; data-target=&quot;#PK1&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Which is the firstElementChild: div.product-rate-card</p>
  <p><strong>What I'm trying to do:</strong>
  Define logic to only remove the toggle button from all locations on the page (not specific to element) if the specific firstElementChild: <em>.product-rate-card</em> is not present in the ParentID: <em>productItemRates-1</em>.   There are other references of the childElement: <em>.product-rate-card</em> found in other parentsIDs within the page. Also, order logic wont work because other childElements can take it's place when it is not present.</p>
  <p>Used the below code to test removal, that worked, just can't figure out the  conditioning logic.</p>
  <pre><code>document.querySelectorAll(&quot;.product-rates-toggle&quot;).forEach(el =&gt; el.remove());
  </code></pre>
  <p>Appreciate any guidance..</p>