How to hide a link using JavaScript?

Hide link element

Given a link element in the document, hide the link element (that is identified by any selection criteria) using JavaScript.

Solution

To hide a specific link element in the document using JavaScript, select the link element by the required selection criteria, and use Element.style.display CSS property. For the link element, set style.display CSS property with "none".

const link = document.getElementById("link1");
link.style.display = "none";

Program

In the following HTML code, we have a button element and two links. When user clicks on the button, we hide all the links in the document by setting each of the link’s style.display to none.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Hide a link in document</h2>
<button id="myBtn">Click me</button><br>
<a id="link1" href="https://javascriptcode.org/">JavaScript Tutorials 1</a><br>
<a id="link2" href="https://javascriptcode.org/">JavaScript Tutorials 2</a>

<script>
//set onclick listener for #myBtn
document.getElementById("myBtn").addEventListener("click", function() {
    //get all the links in the document
    const link = document.getElementById("link1");
    link.style.display = "none";
});
</script>

</body>
</html>

JavaScript Code