How to remove underline from link using JavaScript ?

23 Apr, 2020
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:<!DOCTYPE HTML><html>  <head>    <title>        How to remove underline from        link using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </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 operation";                                  function GFG_Fun() {            var el = document.getElementById('link');            el.style.textDecoration = "none";            el_down.innerHTML = "Underline Removed";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to remove underline from        link using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </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 operation";                                  function GFG_Fun() {            var el = document.getElementById('link');            el.style.textDecoration = "none";            el_down.innerHTML = "Underline Removed";        }    </script></body>  </html>
Output:
Approach 2: Use textDecoration property of JavaScript to perform the operation. But, in this example we are setting the value to line-through.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to remove underline from        link using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </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 operation";                                  function GFG_Fun() {            var el = document.getElementById('link');            el.style.textDecoration = "line-through";            el_down.innerHTML = "Underline Removed";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to remove underline from        link using JavaScript?    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </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 operation";                                  function GFG_Fun() {            var el = document.getElementById('link');            el.style.textDecoration = "line-through";            el_down.innerHTML = "Underline Removed";        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Build a Survey Form using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS