0

I'm trying to hide broken images with the following code. When I do this, all images display:none rather than the affected images. If anyone could help that would be extremely kind. Thanks in advance.

There's a lot of code below, but I wanted to give the full context.

$("img").closest('.mcnImageContent').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
      <table align="left" border="0" cellpadding="0" cellspacing="0" width="300" class="columnWrapper" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
        <tbody>
          <tr>
            <td valign="top" class="columnContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                <tbody class="mcnImageBlockOuter">
                  <tr>
                    <td valign="top" style="padding: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnImageBlockInner">
                      <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                        <tbody>
                          <tr>
                            <td class="mcnImageContent" valign="top" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 20px;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <a href="https://via.placeholder.com/1000x1000.png?t=test/gallery_302" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <img align="center" alt="" src="https://via.placeholder.com/1000x1000.png" width="300" style="max-width: 600px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                  class="mcnImage" data-mc-image-bytes="67583" data-mc-width="375" data-mc-height="459" data-mc-natural-width="600" data-mc-natural-height="734">
                              </a>
                            </td>
                          </tr>
                          <tr>
                            <td class="mcnImageContent" valign="top" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 20px;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <a href="https://via.placeholder.com/1000x1000.png?t=test/gallery_302" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <img align="center" alt="" src="https://via.placeholder.com/1000x1000.png" width="300" style="max-width: 600px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                  class="mcnImage" data-mc-image-bytes="67583" data-mc-width="375" data-mc-height="459" data-mc-natural-width="600" data-mc-natural-height="734">
                              </a>
                            </td>
                          </tr>
                          <tr>
                            <td class="mcnImageContent" valign="top" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 20px;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <a href="https://via.placeholder.com/1000x1000.png?t=test/gallery_302" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <img align="center" alt="" src="https://via.placeholder.com/1000x1000.png" width="300" style="max-width: 600px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                  class="mcnImage" data-mc-image-bytes="67583" data-mc-width="375" data-mc-height="459" data-mc-natural-width="600" data-mc-natural-height="734">
                              </a>
                            </td>
                          </tr>
                          <tr>
                            <td class="mcnImageContent" valign="top" style="padding-right: 0px;padding-left: 0px;padding-top: 0;padding-bottom: 20px;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                              <a href="https://httpstat.us/404?t=test/gallery_302" title="" class="" target="_blank" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                <img align="center" alt="" src="https://httpstat.us/404" width="300" style="max-width: 600px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
                                  class="mcnImage" data-mc-image-bytes="67583" data-mc-width="375" data-mc-height="459" data-mc-natural-width="600" data-mc-natural-height="734">
                              </a>
                            </td>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
StandardCitizen
  • 71
  • 7
  • 1
    Please remove anything that isn't directly related to the problem (and create a [mcve]) e.g. unnecessary white-space, attributes, ... – Andreas Nov 10 '20 at 08:22
  • 2
    What defines a _"broken"_ image? – Andreas Nov 10 '20 at 08:23
  • Failing to load, hint the /404 within the image URL. – StandardCitizen Nov 10 '20 at 08:25
  • the broken image has some kind of class? make normal code – s.kuznetsov Nov 10 '20 at 08:26
  • $ ("img"). closest ('. mcnImageContent'). hide (); - this way you will close all images inside the class `.mcnImageContent` – s.kuznetsov Nov 10 '20 at 08:27
  • Please use CSS instead of inline styling. For one thing it makes the HTML shorter and easier to understand, for another it's faster. – Rory McCrossan Nov 10 '20 at 08:28
  • You'd likely have to attach a handler for `onerror` to each image. Might be easier to leave out the `img` elements' `src` attribute and populate them via JS so you can bind to `onerror` ahead of time. – Ouroborus Nov 10 '20 at 08:30
  • it will be useful for you - https://stackoverflow.com/questions/9815762/detect-when-an-image-fails-to-load-in-javascript – s.kuznetsov Nov 10 '20 at 08:32
  • Didn't you ask something similar in https://stackoverflow.com/questions/64678812/js-hiding-broken-images-within-class ? – Ouroborus Nov 10 '20 at 08:32
  • While you've defined above what you consider a "broken" image - how are you **detecting** them? You currently have just `$("img")` – freedomn-m Nov 10 '20 at 08:53

0 Answers0