Hide an Html Element with a specific style via Javascript

Question

I am trying to hide a specific type of element on a page. It is a div to which only the class "infocell" is assigned. There are about 30 elements per page. Some of the "infocell" divs have a green border. This is probably added via javascript, which I couldn't track down though. So the elements look like this :

<div class="infocell entry18764"></div>

<div class="infocell entry1178" style="border-top-color: rgb(0,153,51);">
</div>

EDIT: Html From the Original Site

<div class="infocell entry28056">
<a href="/info/28056#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/28056.jpg">
</a>
<div>
<a href="/info/28056#top" data-ajax="true" style="font-size:17px;">
Majutsushi Orphen Hagure Tabi
</a>
<span style="display:block; font-size:10px;">
<a href="/info/28056#top" data-ajax="true">Details</a> - <a href="/info/28056/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:5.73 (143)
</div>
<div style="border-bottom:0;">
Action Adventure Drama Fantasy Magic Martial-Art
</div>
</div>
<div class="infocell entry8862" style="border-top-color: rgb(0, 153, 51);">
<a href="/info/8862#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/8862.jpg">
</a>
<div>
<a href="/info/8862#top" data-ajax="true" style="font-size:17px;">
Grisaia no Kajitsu
</a>
<span style="display:block; font-size:10px;">
<a href="/info/8862#top" data-ajax="true">Details</a> - <a href="/info/8862/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:8.05 (4203)
</div>
<div style="border-bottom:0;">
Comedy Drama Ecchi Harem Mystery Psychological Romance School Seinen Violence
</div>
</div>
<div class="infocell entry24494">
<a href="/info/24494#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/24494.jpg">
</a>
<div>
<a href="/info/24494#top" data-ajax="true" style="font-size:17px;">
Dakaretai Otoko 1-i ni Odosarete Imasu.
</a>
<span style="display:block; font-size:10px;">
<a href="/info/24494#top" data-ajax="true">Details</a> - <a href="/info/24494/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:7.66 (353)
</div>
<div style="border-bottom:0;">
Comedy Drama Romance Shounen-Ai Smut Yaoi
</div>
</div>
<div class="infocell entry2080" style="border-top-color: rgb(0, 153, 51);">
<a href="/info/2080#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/2080.jpg">
</a>
<div>
<a href="/info/2080#top" data-ajax="true" style="font-size:17px;">
Boku wa Tomodachi ga Sukunai
</a>
<span style="display:block; font-size:10px;">
<a href="/info/2080#top" data-ajax="true">Details</a> - <a href="/info/2080/list#top" data-ajax="true">Liste</a>
</span>
</div>
<div>
Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
</div>
<div>
Bewertung:7.67 (8086)
</div>
<div style="border-bottom:0;">
Comedy Ecchi Harem Romance School Seinen Slice of Life
</div>
</div>

I couldn't find anything suitable for "hide element with a specific css style". I also have almost no idea about javascript but I tried the following:

function myFunction() {
  var x = document.getElementsByClassName("infocell");
  if (window.getComputedStyle(x).border-top-color === "rgb(0, 153, 51)") {
    document.getElementClassName("infocell").style.display = 'none';
  }
}

Of course this did not work. I don't necessarily want to learn javascript just to solve this one problem. I hope one of you could help me with a solution.

Answer 1

You can append a <style> tag that selects elements with that particular style, and gives them display: none:

document.body.appendChild(document.createElement('style')).textContent = `
  [style="border-top-color: rgb(0,153,51);"] {
    display: none;
  }
`;

<div class="infocell entry18764">content to remain</div>

<div class="infocell entry1178" style="border-top-color: rgb(0,153,51);">content to hide</div>

For the updated HTML, make sure the spacing in the selector string matches the spacing in the elements:

document.body.appendChild(document.createElement('style')).textContent = `
  [style="border-top-color: rgb(0, 153, 51);"] {
    display: none;
  }
`;

<div class="infocell entry28056">
  <a href="/info/28056#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/28056.jpg">
  </a>
  <div>
    <a href="/info/28056#top" data-ajax="true" style="font-size:17px;">
Majutsushi Orphen Hagure Tabi
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/28056#top" data-ajax="true">Details</a> - <a href="/info/28056/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:5.73 (143)
  </div>
  <div style="border-bottom:0;">
    Action Adventure Drama Fantasy Magic Martial-Art
  </div>
</div>
<div class="infocell entry8862" style="border-top-color: rgb(0, 153, 51);">
  <a href="/info/8862#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/8862.jpg">
  </a>
  <div>
    <a href="/info/8862#top" data-ajax="true" style="font-size:17px;">
Grisaia no Kajitsu
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/8862#top" data-ajax="true">Details</a> - <a href="/info/8862/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:8.05 (4203)
  </div>
  <div style="border-bottom:0;">
    Comedy Drama Ecchi Harem Mystery Psychological Romance School Seinen Violence
  </div>
</div>
<div class="infocell entry24494">
  <a href="/info/24494#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/24494.jpg">
  </a>
  <div>
    <a href="/info/24494#top" data-ajax="true" style="font-size:17px;">
Dakaretai Otoko 1-i ni Odosarete Imasu.
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/24494#top" data-ajax="true">Details</a> - <a href="/info/24494/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:7.66 (353)
  </div>
  <div style="border-bottom:0;">
    Comedy Drama Romance Shounen-Ai Smut Yaoi
  </div>
</div>
<div class="infocell entry2080" style="border-top-color: rgb(0, 153, 51);">
  <a href="/info/2080#top" data-ajax="true"><img class="coverimage" src="//cdn.proxer.me/cover/2080.jpg">
  </a>
  <div>
    <a href="/info/2080#top" data-ajax="true" style="font-size:17px;">
Boku wa Tomodachi ga Sukunai
</a>
    <span style="display:block; font-size:10px;">
<a href="/info/2080#top" data-ajax="true">Details</a> - <a href="/info/2080/list#top" data-ajax="true">Liste</a>
</span>
  </div>
  <div>
    Animeserie/TV <img class="tip" src="/images/status/abgeschlossen.png" title="Abgeschlossen" height="20">
  </div>
  <div>
    Bewertung:7.67 (8086)
  </div>
  <div style="border-bottom:0;">
    Comedy Ecchi Harem Romance School Seinen Slice of Life
  </div>
</div>