How to remove underline from link using JavaScript ?

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    • 

  • 
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: 

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    • 

  • 
Output:
    


    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
PranchalKatiyar
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.