Open In App

How to remove underline from link using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Given a link and the task is to remove the underline from the anchor element with the help of JavaScript. There are two approaches that are discussed below: 

Approach 1: Use textDecoration property of JavaScript to perform this operation. It can be set to many values but, in this example, it has been set to none.

Example: This example shows the use of the above-explained approach.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to remove underline from
        link using JavaScript ?
    </title>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <p>
        Click on the button to perform
        the operation
    </p>
 
    <a id="link" href="#">This is Link</a>
    <br><br>
 
    <button onclick="GFG_Fun()">
        Click Here
    </button>
 
    <p id="GFG"></p>
 
    <script>
        let elm = document.getElementById('GFG');
 
        function GFG_Fun() {
            let linkContent = document.getElementById('link');
            linkContent.style.textDecoration = "none";
            elm.innerHTML = "Underline Removed";
        }
    </script>
</body>
 
</html>


Output:

 

Approach 2: Use textDecoration property of JavaScript to perform the operation. In this example, we are setting the value to line-through.

Example: This example shows the use of the above-explained approach.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to remove underline from
        link using JavaScript ?
    </title>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <p>
        Click on the button to perform
        the operation
    </p>
 
    <a id="link" href="#">This is Link</a>
    <br><br>
 
    <button onclick="GFG_Fun()">
        Click Here
    </button>
 
    <p id="GFG"></p>
 
    <script>
        let elm = document.getElementById('GFG');
 
        function GFG_Fun() {
            let linkContent = document.getElementById('link');
            linkContent.style.textDecoration = "line-through";
            elm.innerHTML = "Underline Removed";
        }
    </script>
</body>
 
</html>


Output:

 



Last Updated : 28 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads