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.

Maybe it is this silly "we use cookies" notification that every site under the sun seems to use these days, an on-top prompt to sign up for the newsletter, an ad that overlays content because of bad programming, or something else that is distracting or keeping me from accessing the content.

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

content blocked

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

chrome dev 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.

chrome inspector

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

adjust code position

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.

hide delete element

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.

firefox developer tools

Step 2. Activate the "element picker" and use the mouse to select the item on the page that you want to remove from it.

firefox element picker

Step 3. Right-click on the element in the source and select "delete node" from the context menu to remove it.

delete node

Microsoft Edge

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.

microsoft edge developer

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.

edge select element

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.

edge delete element

 

Summary
Article Name
Hide elements on a page in Chrome, Firefox and Edge temporarily
Description
Find out how to hide or delete page elements in the Google Chrome, Mozilla Firefox and Microsoft Edge web browsers.
Author
Publisher
Ghacks Technology News
Logo
Please share this article

Facebooktwittergoogle_plusredditlinkedinmail



Responses to Hide elements on a page in Chrome, Firefox and Edge temporarily

  1. CHEF-KOCH March 1, 2016 at 9:35 am #

    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.

  2. Dave March 1, 2016 at 10:13 am #

    This looks way complicated compared to using the element blocker in uBlock Origin

    • Jeff March 1, 2016 at 3:15 pm #

      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.

    • Jason March 1, 2016 at 5:18 pm #

      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.

  3. flyli5411 March 1, 2016 at 10:49 am #

    UBLOCK ORIGIN
    Why f around with all that !

    • TekWarfare March 1, 2016 at 10:56 am #

      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

  4. JohnP March 1, 2016 at 10:51 am #

    Or you could use this bookmarklet script and skip the devtools;

    javascript:(function(){var%20e=document.body.style.cursor;document.body.style.cursor="crosshair";var%20t=document.createElement("div");var%20n="border:1px%20solid%20#3280FF;background-color:rgba(50,128,255,0.5);position:absolute;z-index:999999999999999;display:none;";var%20r="pointer-events:none;";var%20i="transition:width%2060ms,height%2060ms,left%2060ms,top%2060ms;";n+=r+"-webkit-"+r+"-moz-"+r;n+=i+"-webkit-"+i+"-moz-"+i;t.setAttribute("style",n);document.body.appendChild(t);var%20s=null;var%20o=function(e){var%20n=e.target;if(n!==s&&n.parentNode){var%20r=n.getBoundingClientRect();var%20i=document.documentElement;var%20o=document.body;var%20u=i.clientTop||o.clientTop||0;var%20a=i.clientLeft||o.clientLeft||0;var%20f=window.pageYOffset||i.scrollTop||o.scrollTop;var%20l=window.pageXOffset||i.scrollLeft||o.scrollLeft;var%20c=l-a+r.left-1;var%20h=f-u+r.top-1;t.style.display="block";t.style.left=c+"px";t.style.top=h+"px";t.style.width=r.width+"px";t.style.height=r.height+"px";s=n}};var%20u=function(n){document.body.style.cursor=e;if(n.target.parentNode)n.target.parentNode.removeChild(n.target);if(t.parentNode)t.parentNode.removeChild(t);window.removeEventListener("click",u,false);window.removeEventListener("mouseover",o,false);n.stopPropagation();n.preventDefault()};window.addEventListener("mouseover",o,false);window.addEventListener("click",u,false)})();void(0)

    • Croatoan March 1, 2016 at 7:25 pm #

      Thanks man :) Only possible in Firefox :) Love it :)

  5. Nebulus March 1, 2016 at 11:07 am #

    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.

    • Martin Brinkmann March 1, 2016 at 11:14 am #

      Good point. I decreased the normal size of the browser window for the screenshot.

  6. oz March 1, 2016 at 2:24 pm #

    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.

  7. Dwight Stegall March 1, 2016 at 3:43 pm #

    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.

    When none of that works I whip out Web Developers Toolbar addon for Firefox. If you disable say Javascript be sure to re enable it when you leave the site or a lot of things on other sites won't work.

    • p3t3r March 23, 2016 at 11:32 am #

      Much effort.

      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.

  8. Maelish March 1, 2016 at 3:59 pm #

    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.

    • p3t3r March 23, 2016 at 11:43 am #

      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.

  9. Pierre March 1, 2016 at 5:49 pm #

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

  10. mma173 March 1, 2016 at 7:20 pm #

    In Firefox, I use the old trusty Nuke Everything Enhanced Addon.

  11. abood March 1, 2016 at 7:33 pm #

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

    • Croatoan March 1, 2016 at 7:52 pm #

      You could use this bookmarked (on firefox)

      javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200

      for hiding (or altering) sensitive data before taking a screenshot.

      • abood March 1, 2016 at 8:07 pm #

        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.

      • Croatoan March 1, 2016 at 8:40 pm #

        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)

  12. Xircal September 19, 2016 at 6:17 pm #

    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.

Leave a Reply