title: Using Javascript to hide elements with specific data-test-id value
body: <p>I often use a simple Greasemonkey JS script to hide elements on web pages - this is a basic one I use to hide some ads on Yahoo Mail which are in DIVs with a specific ID:</p>
  
  <pre><code>function addGlobalStyle(css) {
      var head, style;
      head = document.getElementsByTagName('head')[0];
      if (!head) { return; }
      style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = css;
      head.appendChild(style);
  }
  
  addGlobalStyle(" #slot_LREC, #slot_LREC4 { display:none; }");
  </code></pre>
  
  <p>The issue I have is that quite a lot of content in Yahoo Mail doesn't have a generic Class or ID, but instead has a <code>data-test-id</code> value - e.g.</p>
  
  <pre><code>&lt;a data-test-id="pencil-ad" class="something_very_complicated"&gt;example&lt;/a&gt;
  </code></pre>
  
  <p>I wondered if there's any way to create a variant of the addGlobalStyle function to hide elements where an element has a specific <code>data-test-id</code> value?</p>
  
  <p>I don't have the option of using jQuery - or at least, I don't know how to add jQuery into the GM script...</p>
  
  <p>As far as I can tell, this isn't a duplicate of <a href="https://stackoverflow.com/questions/7084557/javascript-select-all-elements-with-data-attribute-without-jquery">javascript: select all elements with &quot;data-&quot; attribute (without jQuery)</a> because I am trying to hide only one element where the data-test-id attribute has a certain value. I'm not trying to hide all elements which have a data-test-id attribute.</p>