title: JS Hiding Broken Images Within Class
body: <p>I understand how to hide images if they're as followed,</p>
  <pre><code>&lt;img src=&quot;&quot;......&gt;
  </code></pre>
  <p>However, I'm having problems as I know nothing about JS on how to hide broken images if they're like this,</p>
  <pre><code>&lt;div class=&quot;lx-g3-f&quot; &gt;
    &lt;div class=&quot;lx-gallery&quot; data-bg=&quot;image_url&quot; alt=&quot;alt text&quot; referrerpolicy=&quot;no-referrer&quot; title=&quot;something title&quot;&gt;
    &lt;div class=&quot;lx-gallery-title&quot; &gt;
      &lt;h3&gt;&lt;a href='something_img_url' referrerpolicy=&quot;no-referrer&quot;&gt;click here!&lt;/a&gt;&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;              
  </code></pre>
  <p>How can I make the following work when <code>img</code> doesn't exist.</p>
  <pre><code>$(&quot;img&quot;).on(&quot;error&quot;, function() {
      $(this).closest('.lx-g3-f').hide();
  });
  </code></pre>