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

Martin Brinkmann
Mar 1, 2016
Development
|
31

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

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
Hide elements on a page in Chrome, Firefox and Edge temporarily
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
Advertisement

Previous Post: «
Next Post: «

Comments

  1. Ashish said on January 12, 2022 at 11:44 am
    Reply

    how to hide source in devloper option?

  2. Eleanor said on January 6, 2022 at 10:51 am
    Reply

    Hi Braden:
    OMFG??
    Why are you getting religious on my screen?
    Please tone it down a bit?
    Cheers, Eleanor

  3. brayden said on October 14, 2020 at 6:31 pm
    Reply

    omfg, i blocked an image on an website and it WONT come back, how do i get it back

    1. frederik maiers said on January 6, 2022 at 10:49 am
      Reply

      @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”!

      Sorry.

  4. Alicia Bajart said on March 9, 2018 at 11:37 am
    Reply

    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?

    1. Martin Brinkmann said on March 9, 2018 at 11:41 am
      Reply
  5. Xircal said on September 19, 2016 at 6:17 pm
    Reply

    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.

  6. abood said on March 1, 2016 at 7:33 pm
    Reply

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

    1. Croatoan said on March 1, 2016 at 7:52 pm
      Reply

      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.

      1. Croatoan said on March 1, 2016 at 8:40 pm
        Reply

        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)

      2. abood said on March 1, 2016 at 8:07 pm
        Reply

        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.

  7. mma173 said on March 1, 2016 at 7:20 pm
    Reply

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

    1. Pierre said on March 1, 2016 at 8:03 pm
      Reply

      I’ve not found it

  8. Pierre said on March 1, 2016 at 5:49 pm
    Reply

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

  9. Maelish said on March 1, 2016 at 3:59 pm
    Reply

    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.

    1. p3t3r said on March 23, 2016 at 11:43 am
      Reply

      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.

  10. Dwight Stegall said on March 1, 2016 at 3:43 pm
    Reply

    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.

    1. p3t3r said on March 23, 2016 at 11:32 am
      Reply

      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.

  11. oz said on March 1, 2016 at 2:24 pm
    Reply

    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.

  12. Nebulus said on March 1, 2016 at 11:07 am
    Reply

    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.

    1. Martin Brinkmann said on March 1, 2016 at 11:14 am
      Reply

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

  13. JohnP said on March 1, 2016 at 10:51 am
    Reply

    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)

    1. Croatoan said on March 1, 2016 at 7:25 pm
      Reply

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

  14. flyli5411 said on March 1, 2016 at 10:49 am
    Reply

    UBLOCK ORIGIN
    Why f around with all that !

    1. TekWarfare said on March 1, 2016 at 10:56 am
      Reply

      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

  15. Dave said on March 1, 2016 at 10:13 am
    Reply

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

    1. Jason said on March 1, 2016 at 5:18 pm
      Reply

      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.

      1. Anonymous said on September 29, 2021 at 5:30 pm
        Reply

        THANK YOU~

    2. Jeff said on March 1, 2016 at 3:15 pm
      Reply

      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.

  16. CHEF-KOCH said on March 1, 2016 at 9:35 am
    Reply

    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.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.