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

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.

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.

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.