Tutorials using JS
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>