Here is how to remove links underline using JavaScript with steps and example we have shown here. We have shown two examples in this tutorial and you can easily master this method by going thorugh each one of them. In this first example we are using JavaScript textDecoration property to remove underline from hyperlinks anchor tags. We will simply set its value to none and it will do the job:
Like in the previous example we used CSS to remove hyperlinks underlines here we are using JavaScript:
<!DOCTYPE HTML>
<html>
<head>
<title>
How to remove underline from
link using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:orange;">
LaraMatic
</h1>
<p id="GFG_UP"></p>
<a id="link" href="#">This is Link</a>
<br><br>
<button onclick="GFG_Fun()">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById('GFG_UP');
var el_down = document.getElementById('GFG_DOWN');
el_up.innerHTML = "Click on the button to "
+ "remove underline";
function GFG_Fun() {
var el = document.getElementById('link');
el.style.textDecoration = "none";
el_down.innerHTML = "Underline Removed";
}
</script>
</body>
</html>Before clicking the button to remove underline
Output
Example #2 In the second example we will also use texDecoration JavaScript property but the value we set will be strike through instead of removing the underline to show you how you can practice it by setting its value however you want.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to remove underline from
link using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:orange;">
LaraMatic
</h1>
<p id="GFG_UP"></p>
<a id="link" href="#">This is Link</a>
<br><br>
<button onclick="GFG_Fun()">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById('GFG_UP');
var el_down = document.getElementById('GFG_DOWN');
el_up.innerHTML = "Click on the button to "
+ "perform the strikethrough";
function GFG_Fun() {
var el = document.getElementById('link');
el.style.textDecoration = "line-through";
el_down.innerHTML = "Underline Removed";
}
</script>
</body>
</html>Before clicking the button to remove underline
Output
In both above examples we changed JavaScript textDecoration values once to none to remove hyperlinks underline and in the next example we set it to remove underline and strike through the link.
