How to Remove Elements from a Web Page in Chrome

How to Remove Unwanted Elements from a Web Page in Chrome

by | Dec 13, 2024 | Useful Tech

Tired of menus in wrong places, errors in odd corners and overlays in all spots? Looking to take a clean screenshot? Find out here how to remove unwanted elements from a web page as rendered in Google Chrome on the desktop.

First, You Have a Pinkie Finger

You have a pinkie finger to spread it at an angle of some 30° upwards from the sheer flat non-dominant hand.

If you practice with me, form a very shallow cup with the hand and bend it down at the wrist a bit so the forearm, the base of the thumb and the upward-pointing pinkie finger’s tip are level. Now use your dominant hand to rest a large table upon the three points—and then another table, and one more, and a bowl perhaps on top. Another plate goes underneath, of course, tucked under the thumb and pinkie, resting on the remaining three fingers.

This most treasured skill lets you clear (or serve) any table with marvelous efficiency. Want to remove elements from a website, though? Here’s how to hold Chrome:

How to Remove Unwanted Elements from a Web Page in Chrome

Time needed: 5 minutes

To delete an unwanted element or part of a website (e.g., for a printout or screenshot) in Google Chrome:

  1. Click with the right mouse button on the part of or element on the web page you want to remove.

  2. Select Inspect from the context menu that has appeared.

    Select “Inspect” to open the element you want to remove in Chrome developer tools “Inspector”

  3. Verify everything you want to remove is highlighted as you hover over the source code under Elements in the Chrome developer tools

    Here’s how: Move the mouse cursor over the highlighted part in the source code; watch the corresponding part of the rendered page highlighted.
    Here’s where: Begin with the element initially selected.

  4. Click on the element with the right mouse button.

  5. Select Delete element from the menu that has appeared.

    No undo: You cannot undo deleting an element without reloading the page.
    Hide: Editing the HTML source, you can also hide an element instead of deleting it; see below.
    Select “Delete Element” to remove it from the web page’s rendering in Google Chrome

  6. Close Chrome developer tools.

    To disk: You can take a screenshot of the now-clean page, for example.
    See the page without the unwanted element

How to Remove Unwanted Elements from a Web Page in Chrome: FAQ

Can I undo removing an element?

No.

To restore the page in its original form, reload it.

Can I also hide an element using Chrome?

Yes.

To merely hide an web page element from rendered display in Google Chrome:

  1. Go to the element in developer tools Inspector; see above.
  2. Double-click the HTML tag for the element.
    Example: For a <div> element, double click <div.
    Alternative: You can also click on the element with the right mouse button and select Edit as HTML from the context menu.
  3. Add or modify the HTML code to add the following CSS instruction: style="display:none;".
    Example: Make the opening <div> tag read <div style="display:none;">, for example.
  4. Press Enter.
    Hide an element on a page using Chrome developer tools

Can I remove elements in Chrome for Android or iOS?

No, not directly.

While you cannot access development tools in Chrome for iOS and Android, you can connect either browser to Chrome on a desktop and manipulate the contents remotely.

(How to remove unwanted elements from a web page tested with Google Chrome 126–131; first published July 2024, last updated December 2024)

Home » Useful Tech » How to Remove Elements from a Web Page in Chrome