1K Views
To Completely completely hide a link
If you want to completely hide a link (<a> element) using JavaScript and CSS, you have a few options. Here are some approaches:
Option 1: Hide with CSS (display: none;)
This removes the link from the page layout entirely.
.hidden-link {
display: none;
}
<a href="https://example.com" class="hidden-link">Hidden Link</a>
Option 2: Hide with CSS (visibility: hidden;)
This makes the link invisible but still occupies space.
.hidden-link {
visibility: hidden;
}
<a href="https://example.com" class="hidden-link">Hidden Link</a>
Option 3: Hide with JavaScript
Dynamically remove the link using JavaScript.
document.addEventListener("DOMContentLoaded", function () {
document.querySelector(".hidden-link").style.display = "none";
});
<a href="https://example.com" class="hidden-link">Hidden Link</a>
Option 4: Remove the Link Completely
This removes the link from the DOM.
document.addEventListener("DOMContentLoaded", function () {
let link = document.querySelector(".hidden-link");
if (link) {
link.remove();
}
});
Option 5: Make the Link Unclickable
If you want the link to be visually present but not clickable:
.hidden-link {
pointer-events: none;
color: inherit; /* Remove link styling */
text-decoration: none;
}
Would you like the link to be hidden for specific users or only under certain conditions?