Home How to prevent a HTML tag with a certain attribute from displaying in Google Chrome
Reply: 5

How to prevent a HTML tag with a certain attribute from displaying in Google Chrome

NoobCoder
1#
NoobCoder Published in 2018-01-13 08:55:44Z

I have been using Stylish, an extension for Google Chrome to stop annoying ads and other items from displaying. Basically, you need the class name or id of the tag and you can prevent it from displaying when the website loads.

I have this following item that I also want to stop displaying but it doesn't have an id and the class name is common with other li items which I want to display.

<li role="rowgroup" data-test-id="infinite-scroll-AD" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);"></li>

In this case, I need to target data-test-id="infinite-scroll-AD" but how to do that in Stylish or another extension supported by Google Chrome browser?

Jordi Nebot
2#
Jordi Nebot Reply to 2018-01-13 09:04:39Z

This should do the trick:

[data-test-id="infinite-scroll-AD"] {
    display: none; /* Or whatever */
}

See Using data attributes.

Also, if the AD part of your data-test-id was some kind of Ad identifier, and you want to hide them all you could use:

[data-test-id^="infinite-scroll-"] {
    display: none; /* Or whatever */
}

Meaning select any element having a data-test-id that starts with infinite-scroll-

See Attribute selectors for more information.

Optiroot
3#
Optiroot Reply to 2018-01-13 09:01:01Z

You can use css as normally would do:

li[role="rowgroup"][data-test-id="infinite-scroll-AD"] {
   display: none;
} 
bprdev
4#
bprdev Reply to 2018-01-13 09:01:19Z

try this. Not 100% sure it will work though.

document.querySelector('li[data-test-id="infinite-scroll-AD"]')
Kraken
5#
Kraken Reply to 2018-01-13 09:12:14Z

I don't use Stylish, but if you are learning to code, you . might like to know that you can do it yourself in the dev console.

  1. Open the dev console:

    • Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
    • If DevTools is already open, press the Console button.
    • developers.google.com
  2. Enter document.querySelector('[data-test-id=infinite-scroll-AD]').style.display = 'none';

  3. Et voila!

This will not last through a page refresh. You will have to do it every time manually. Alternatively you could also alter your CSS in the console as well. You'd have to inspect the element (from right click/context menu), and then in the right panel under styles you could add a rule display: none

Ivan86
6#
Ivan86 Reply to 2018-01-13 09:52:55Z

You can do it with the jQuery $( window ).load() method and then targeting your element(s) like this:

$('li[data-test-id="infinite-scroll-AD"]').css("display", "none");   //apply to all

If you wanted to target only the first element:

$('li[data-test-id="infinite-scroll-AD"]:first').css("display", "none");

Here is an example:

$( window ).load(function()
{
   $('li[data-test-id="infinite-scroll-AD"]').css("display", "none");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li role="rowgroup" data-test-id="infinite-1" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">This is some text</li>
    <li role="rowgroup" data-test-id="infinite-scroll-AD" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">This is THE AD</li>
    <li role="rowgroup" data-test-id="infinite-2" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">Some other text</li>
</ul>

Note: $( window ).load() waits for the entire HTML page to load including scripts, CSS, images, etc. before executing. An alternative would be to use $( document ).ready() which waits only for the DOM to load, then executes.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307012 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO