# Hide an element

Set the hidden attribute.

Canonical: https://1loc.dev/dom/hide-an-element/
Version: 1.0.0
Runtime: JavaScript · modern browsers (DOM)
Verification: Usage lines executed in headless Chromium against the fixture markup; no external services
Updated: 2026-10-28

## Implementation

```javascript
function hide(element) { element.hidden = true; }
```

## Usage

Markup:

```html
<p id="notice">Saved</p>
```

Script:

```javascript
const notice = document.querySelector('#notice');
hide(notice);
notice.checkVisibility(); // → false
```

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

## Limits

- hidden removes the element from layout and from the accessibility tree. A stylesheet rule such as display: flex overrides it; add [hidden] { display: none !important } to be safe.
- visibility: hidden keeps the space. To hide content visually but keep it for screen readers, use a visually-hidden class instead.

The function does not validate its arguments. Add checks where it receives untrusted input.

## Source and license

Original: https://github.com/phuocng/1loc/blob/14b481cf60dff1620ab1bb99a43b1f68068cdd9b/contents/hide-an-element.mdx
Author: Nguyen Huu Phuoc and original contributors
Contributors: iamdileepkumar, islamozbek
Source commit: 14b481cf60dff1620ab1bb99a43b1f68068cdd9b
Copyright (c) 2020 phuoc-ng
License: MIT — https://1loc.dev/licenses/
Maintainer: Oveyon
Modifications: Uses the hidden attribute; display and visibility trade-offs documented. Executed in Chromium. Original MDX retained as inert source evidence.