I’ve tried my best to make sure that this site works great (or at least reasonably well) even without JavaScript, but when JavaScript isn’t available, it can be a little clunky to hide things that do require it. With a mere 7 lines (or a one-liner if you’re nasty), you can easily hide elements that require JavaScript so that you don’t end up with broken functionality visible to users who have JavaScript off.

Lobsters is a community-driven platform for sharing and discussing links to articles, tutorials, and projects related to technology and programming. Readers can learn about a wide range of topics, from software development and system administration to cybersecurity and artificial intelligence. With user submissions, comments, and voting, Lobsters provides a platform for collaborative learning and knowledge sharing among technology enthusiasts.

Lobsters

Learn how to hide elements that require JavaScript without using JavaScript. The post covers several methods, including using the <noscript> tag, adding a js-enabled class via JavaScript, and combining <noscript> with CSS overrides for specific elements. The final recommendation involves using a d-js-required class to simplify the process and reduce maintenance.

Hiding elements that require JavaScript without JavaScript

Using JavaScript to indicate JavaScript is enabled

Using noscript to override specific elements

⭐ Using noscript and a d-js-required class.

<p>you can also add a “no-js” body class and convert that with js to a “js” body class instead of doing it element by element.</p>
