Hide elements on a page in Chrome, Firefox and Edge temporarily
Some web pages annoy the hell out of me with page elements they display to me when I'm opening them in a web browser.
My reaction depends on a number of factors including how much I want to access the content, the annoyance that is displayed, and if it is a site that I visit regularly.
If the content is not essential, I leave it usually and never come back unless I can access it with a simple click on a close icon or button. If the content is important, say for a new article that I'm writing or has information that no other site offers, then I will find a way around the issue usually.
Tip: When it comes to text content, I try to locate a print option on the page first as it loads a page with a clear focus on content and nothing else. It may even merge multi-page articles into one. Reader modes, or extensions, may be another option.
Hide elements in Chrome, Firefox and Edge temporarily
This does not work for all content and sites unfortunately. Chrome, Firefox and Edge, and browsers based on their code, ship with Developer Tools that you can make use of to remove any page element temporarily on a site.
This is a good option for sites or pages that you know you will never visit again after the current visit. If you visit a site regularly, browser extensions that remove elements permanently may be the better option instead.
Google Chrome and most Chromium based browsers
Here is what you need to do in Google Chrome and browsers that share the codebase to remove elements on a page temporarily:
Step 1. While on the page, tap on the F12 key to open the browser's Developer Tools
Step 2. Use the Inspector to highlight an item on the page that you want to remove from it. This is done by activating the Inspector, and using your mouse to pick the element you want gone. Click on that element to have Chrome jump to the position of it in the source code.
Step 3. Adjust the position in the code if necessary. Sometimes, parent elements may need to be selected to remove all of the element from the page. If you don't know HTML, simply use trial and error until you get it right by moving up one element at a time (usually div elements).
Step 4. Remove the element by right-clicking on the line of code in the Developer Tools area, and selecting "hide element" or "delete element" from the context menu.
You need to use trial and error again, or your judgement, to find which works better on the site. Note that you may remove the underlying content as well if you remove a page element depending on how the site is set up.
Firefox and Firefox-based browsers
Step 1. Press F12 to open the Developer Tools of the web browser. The page that you want to remove elements on needs to be active.
Step 2. Activate the "element picker" and use the mouse to select the item on the page that you want to remove from it.
Step 3. Right-click on the element in the source and select "delete node" from the context menu to remove it.
Step 1. Press F12 to open the Developer Tools in Microsoft Edge while the page that you want to modify elements on is active in the browser.
Step 2. Activate the "select element" feature of the browser, move the mouse over the element you want to delete, and click on it to jump to it in the source code.
Step 3. Right-click on the element in the code, and select "delete element", or press the Del-key directly, to remove it from the page.
Working with DOM is fine but I guess for most users this is to complicated. There are addons or adblockers which making this a lot of easier, most or all of them can temporarily block xyz.
This looks way complicated compared to using the element blocker in uBlock Origin
This. I use a combination of Ublock & YesScript to get sites to STFU. Ublock to hide elements, and if I can’t stop pop-up overlays, I use YesScript to blacklist the site from popping up things like “join our mailing list” overlays.
Actually, I like this method. The uBlock Origin method assigns a permanent rule, which you must then manually delete if you only wanted to temporarily block the element. Martin’s method is just as easy (Firefox: 1. Press F12, 2. Press element picker, 3. Select element, 4. Select “delete node”!) but it is for temporary deletion.
Why f around with all that !
For the layman, sure. But you can create style scripts that hide these elements at browser level (with firefox). You also get to learn some CSS at the same time. Oh, and hiding elements is just the start; you can then begin to tweak pages to your liking, for example: http://i.imgur.com/uaIFk7z.png
Or you could use this bookmarklet script and skip the devtools;
Thanks man :) Only possible in Firefox :) Love it :)
Excellent tutorial. Thanks, Martin!
As a sidenote, it is useful to deactivate “Toggle split console” in Firefox, because it gives you more space to view the HTML code.
Good point. I decreased the normal size of the browser window for the screenshot.
Thanks for the good info provided here, Martin!
uBlock-Origin continues to help me eliminate any unwanted page elements, whereas I used to use Element Hiding Helper with Adblock Plus, but that’s been ages ago.
Using developer tools to remove these items is too slow and difficult for the average person.
To save time and my sanity, I use the following:
I use Overlay Blocker extension for Chrome and Behind The Overlay addon for Firefox.
For the difficult ones I use Hide Element option in Adblock Plus for Chrome and the Element Hiding Helper addon that works with Adblock Plus addon for Firefox. The Element Hiding Helper addon works much better than the Hide Element in Adblock Plus extension for Chrome.
I’m very comfy with uBlock Origin and NoScript. Besides TrackMeNot and some other privacy-tools running in background i don’t need more.
I enjoy clean browsing on all my engines. No “blinki-blinki”, no ads, no annoyances. Nearly.
But hey â€“ this is SOL3, Terra, an underdeveloped planet full of idiots who need to use Google to find and read bild.de. And GPS for finding their a55h0l3.
I use Martin’s technique quite often. It is a godsend.
Noticed people mentioning uBlock Origin in this context. But have any of you noticed that uBlock Origin has started causing extension errors in Chrome? It is blocking some Ghostery rewrites.
In earlier times I used Ghostery. But the combination with uBlock Origin and NoScript makes IMHO Ghostery obsolete. I removed Ghostery from my favourite browser (Pale Moon) and erverything works fine.
“Prebake” list is installed by default (select it or not) in Adblock Plus (Firefox and family, Chrome/Chromium and family)
Your method gives more work than closing cookies warning manually !
In Firefox, I use the old trusty Nuke Everything Enhanced Addon.
I’ve not found it
This will sound like a clichÃ©, but I didn’t realize many people did this too. Yeah, I really thought I was a special cookie!
Kidding aside, I extensively use the “Inspect Element” technique you’ve demonstrated to obfuscate, or rather, hide sensitive data on a webpage prior to taking a screenshot or filming a screen-cast and posting it online. The big advantage is that no editing is required afterwards, therefore saving me time.
Other than that, I mainly use this technique to remove the sign up box and the washed-out overlay behind it that covers the Quora website (as you’ve already demonstrated in the first screenshot). Shall we call it a “signup-bypass surgery”? Well, in a way, it is.
One last thought: I am in complete agreement with you about the unfortunate plague of the cookie notifications. I used to patiently read and close the notifications when the trend was still new. However, nowadays some notifications are so irritating and cover a substantial amount of the page (even on a widescreen monitor), that they alone are enough reason for me to completely forget why I visited the website and send it to oblivion (aka closing the tab), never to be visited again. Unlike ads, I don’t think I’ll develop a blind eye to those.
Now tell me, where’s the cookie [notification] monster when you need him?!
You could use this bookmarked (on firefox)
for hiding (or altering) sensitive data before taking a screenshot.
That’s very useful. Thank you Croatoan! The scripts that you and JohnP have posted both do a great job! Your script is persistent across all tabs. I only tested it in Firefox.
Perhaps Martin could review bookmarklets (they don’t use any cpu and ram as extension)
Good sites for combining bookmarklets is http://w-shadow.com/bookmarklet-combiner/?bookmarklet=6663
(it took only one bookmark spot for all my bookmarklets)
It doesn’t work on some Dutch sites like Trouw.nl which displays a huge cookie notice. The problem there is that the page appears to continually reload which prevents the element picker from displaying anything.
I did it the way it was told in this article, but when I close and refresh the page, the part I hided or deleted is back again.
How can I remove it that it is gone from the page?
Check out this guide: https://www.ghacks.net/2017/02/21/ublock-origin-how-to-remove-any-element-from-a-page-permanently/
omfg, i blocked an image on an website and it WONT come back, how do i get it back
@Braden:- Until you tell someone what you did specifically, or how and which software you used to do it, the current answer to your question may have to be “reinstall browser”!
Why are you getting religious on my screen?
Please tone it down a bit?
how to hide source in devloper option?