How to hide an image in JS having specific alt attribute content?

Question

I have a DOM as shown below in which I want to hide an image having specific alt attribute content.

All of them are inside the li tag with class shows-grid__thumb. The alt attribute contents are at Line A (Vote 2015 Debates), Line B (Vote 2015 Special) and Line C (Vote 2015 Phone-in).

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote 2015 Debates" data-fallback-img=""> <!-- Line A -->        
      </figure>
   </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote 2015 Special" data-fallback-img=""> <!-- Line B -->        
      </figure>
   </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote 2015 Phone-in" data-fallback-img=""> <!-- Line C -->   
      </figure>
   </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote Reform" data-fallback-img="">      
      </figure>
   </a>
</li>

Problem Statement:

I am wondering what JS code I need to add so that it hide images having alt attribute content Vote 2015 Debates , Vote 2015 Special and Vote 2015 Phone-in from the DOM/webpage. I don't want to hide that image which has alt attribute content Voting Reform.

This is what I have tried but more need to be done.

let el = document.querySelectorAll("li.shows-grid__thumb");

const ext = ["Vote 2015 Debates", "Vote 2015 Phone-in", "Vote 2015 Special"];

el.forEach(el =>

  el.setAttribute("style", "display: none;")
)

Answer 1

You could use the img[alt='YOUR_STRING'] selector, following snippet give the desire result on clicking the button:

const ext = ["Vote 2015 Debates", "Vote 2015 Phone-in", "Vote 2015 Special"];

ext.forEach(el =>
  document.querySelector("img[alt='" + el + "']").closest('li').setAttribute("style", "display: none;")
);

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote 2015 Debates" data-fallback-img="">
      <!-- Line A -->
    </figure>
  </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote 2015 Special" data-fallback-img="">
      <!-- Line B -->
    </figure>
  </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote 2015 Phone-in" data-fallback-img="">
      <!-- Line C -->
    </figure>
  </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote Reform" data-fallback-img="">
    </figure>
  </a>
</li>