Hide an element with Chrome DevTools

We can hide an element by inspecting it with Chrome DevTools, right-clicking the element under the Elements tab, and choosing the Hide element menu from the context menu.
Hide an element
Hide an element
If you're a fan of using the shortcut, then pressing the <kbd>h</kbd> key has the same effect.
<video loop muted controls> <source src="/img/hide-element.mp4" type="video/mp4"> </video>
Both ways add a specical CSS class named `__web-inspector-hide-shortcut__` to the element:
.__web-inspector-hide-shortcut__ {
visibility: hidden !important;
Setting `display: none`, `opacity: 0`, and `visibility: hidden` are the common ways to hide an element with CSS. If you want to see the differences between them, take a look at this post