Tips for hiding an HTML tag with specific attributes from showing up in Google Chrome

Lately, I've been using a handy extension called Stylish on Google Chrome to block those annoying ads and other unwanted elements from popping up. It's quite simple - all you need is the class name or id of the tag, and you can make it disappear when the website loads.

However, I stumbled upon an item that I also want to get rid of, but the problem is that it doesn't have an id, and the class name it shares with other similar items that I actually want to keep visible.

<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>

So, in this particular scenario, what I need to target is data-test-id="infinite-scroll-AD". How can I achieve this using Stylish or another compatible extension for the Google Chrome browser?

javascriptjqueryhtmlcssgoogle-chrome

Answer №1

Here is a solution that might help:

[data-test-id="infinite-scroll-AD"] {
    display: none; /* You could try this or something similar */
}

For more information on using data attributes, you can refer to this resource.

If the `AD` portion of your `data-test-id` represents an Ad identifier and you want to hide all elements with such identifiers, you can use the following CSS:

[data-test-id^="infinite-scroll-"] {
    display: none; /* Or any other style modification you prefer */
}

This basically means selecting any element with a `data-test-id` that begins with `infinite-scroll-`

Check out this page on Attribute selectors for further details.

Answer №2

To hide certain elements using CSS, you can simply write the following code:

li[role="rowgroup"][data-test-id="infinite-scroll-AD"] {
   display: none;
}

Answer №3

I may not be familiar with Stylish, but for those who are delving into coding, it's worth noting that you can actually customize it yourself using the developer console.

  1. To access the dev console:

    • On Windows or Linux, press Ctrl+Shift+J. On Mac, press Cmd+Opt+J.
    • If DevTools is already open, click on the Console button.
    • Visit developers.google.com

  2. Type in 

    
document.querySelector('[data-test-id=infinite-scroll-AD]').style.display = 'none';

  3. And there you have it!

Keep in mind that this customization won't persist through a page reload. You'll need to modify it manually each time. Alternatively, you can make changes to your CSS from the console as well. Simply inspect the element (via right-click/menu), then in the styles panel on the right, add a rule like display: none

Answer №4

To achieve this, make use of the jQuery method $( window ).load(). You can target your desired element(s) by following this approach:

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

If you specifically want to target the first element:

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

Here is a demonstration:

$( 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);">Some content here</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);">Advertisement goes here</li>
    <li role="rowgroup" data-test-id="infinite-2" class="p_a T_0 L_0 R_0" style="transform: translate3d(0px, 0px, 0px);">Additional text</li>
</ul>

Note: The $( window ).load() function waits for the complete loading of the HTML page along with scripts, stylesheets, images before execution. Another option is to utilize $( document ).ready(), which only waits for the Document Object Model (DOM) to load.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing/Redrawing/Resizing a panel in jQuery Layout when toggling the visibility of a header or footer

Currently utilizing a standard jQuery layout with north, south, west, east, and center sections as outlined in the documentation. In both the west and center panels, there are header and footer panes included. While everything is functioning correctly, I ...

javascriptjqueryjquery-layout

The task "default" is not found within your current gulpfile configuration

After running gulp in my console, I encountered the following error: Task 'default' is not in your gulpfile I double-checked my gulpfile and it appears to be correct: var gulp = require('gulp'), LiveServer = require('gulp- ...

javascriptnode.jsnpmgulp

Running Intel XDK on my Windows 8 64-bit system - A step-by-step guide

Every time I try to open this app, it gets stuck on the "initializing" screen and nothing happens. I've tried uninstalling and reinstalling the latest version multiple times but the problem persists. I even tried downloading compatible node-webkit fil ...

androidhtmlcross-platformmobile-websiteintel-xdk

Knockout.JS encounters difficulty retrieving the value attribute in a select tag when the data is sourced from the server

After making an ajax request and binding the dropdown list, I noticed that the select tag was not reading the value attribute. However, when I bind the drop down list in the view model, it does recognize the value. For example: It works if I bind the mode ...

javascriptajaxknockout.js

What is the best way to create a unique background shape for Bootstrap 4 carousel controls?

Hello, I am currently working on a Bootstrap 4 Carousel where my controls are replaced by arrow images. I am attempting to create an oval-shaped background for the arrows as shown in this picture. However, I am facing issues with adjusting the border to ...

htmlcssbootstrap-4carousel

Aligning SVG shapes within each other

I recently encountered a scenario where I needed to position SVG shapes in the center of each other with varying scales. For instance, placing a rectangle or triangle within the center of a circle. While I found some solutions that worked for shapes like ...

javascripthtmlcsssvg

1. Catalog of dual JSON inquiries2. Compilation of

I am struggling to understand the right way to proceed. When I run this query, I receive a JSON response containing file names: $.getJSON("http://api.server.com/my/?callback=?", function(data){ var results = []; $.each(data['resul ...

javascriptjsonparsing

Utilize the `document.getElementById` method to trigger both function 2 and form 2 when clicked

Hey there, I'm having some issues with my code and would appreciate some help. After a user submits my form with the ID of 'fwrdform' using the onclick event, I want to also trigger another function from my 'logout-form' so that t ...

javascriptphphtmlcss

Currently, my goal is to create PDFs using Angular

<button class="print" (click)="generatePDF()">Generate PDF</button> Code to Generate PDF generatePDF(): void { const element = document.getElementById('mainPrint') as HTMLElement; const imgWidth = 210; ...

javascriptangularangularjstypescriptpdf

Building Your Own Array Object in JavaScript

Yes, it may seem crazy at first glance, but let me clarify things a bit. When using Jquery, for instance $('div'), it returns an Array Collection similar to this: [div#container, div#header, div#logo]. The interesting part is that primitive Arra ...

javascriptjquery

Understanding the functionality of an array as an index in JavaScript

It was discovered (tested in Chrome) that the index of an array can actually be an array itself: a = [1, 2, 3] index = [1] a[index] // returns 2 Has there been any official documentation confirming this behavior? ...

javascriptarrays

Error 404 encountered when attempting to send a JSON object to the server

I've been facing a problem while trying to send a JSON object to the server using AJAX calls. I keep getting a 404 Bad Request error. The issue seems to be related to the fact that I have a form where I convert the form data into a JSON object, but th ...

javascriptjavaangularjsajaxcontroller

"Possible Reasons for Jquery Not Displaying JSON Data When Retrieving from W

I have created a basic WCF method that is returning the correct values, but for some reason it is showing a status code of 200. $.ajax({ url: "http://localhost:60770/Service.svc/GetContacts?calback=?", type: "POST", dataType: " ...

jqueryajaxwcfcross-domain

Receiving a 403 Forbidden error when trying to submit a Django form using Ajax

I have implemented a feature that allows users to remove posts via ajax. Each post has a boolean field called live_until_removed which, when set to false, makes the post disappear. However, when I click on remove, I encounter a 403 error which references: ...

pythonajaxdjangojquery

Conceal the background of the lower div when the top div is displayed

I am struggling to figure out how to achieve this, or if it can even be done: <body> has a background image <div parent> has a background image <div child></div> does not have a background </div> My goal is to make the chi ...

htmlcss

Executing Apache code for uploading images

Experimented with a code snippet to upload an image to a server using JQuery AJAX and PHP on a WAMP server. Wondering if the same code would be compatible with an Apache web server? Appreciate any insights... ...

phpjqueryapachewamp

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...

javascriptjqueryhtmlcss

Leveraging the power of ReactJS alongside Google Tag Manager

Looking for a way to track my application using Google Tag Manager, I stumbled upon a popular package at https://www.npmjs.com/package/react-google-tag-manager. However, despite following the instructions, I am having trouble configuring it properly! Foll ...

javascriptreactjsgoogle-tag-manager

Module not found (Error: Module not found for './models/campground')

Here is the code snippet I am working with: var express = require("express"), app = express(), bodyParser = require("body-parser"), mongoose = require("mongoose"), Campground = require("./models/campground"), Comment = require("./mode ...

javascriptnode.jsexpressmongoose