How to hide span element if anchor href attribute is empty using JavaScript ? - GeeksforGeeks

01 Oct, 2020
The task is to hide the <span> tag when href attribute of <a> tag is not present or invalid.
Let us consider we have <a> tag inside the <span> tag. It will look similar to this:
<span><a href="www.google.com"></a></span>
Now we add the id to the elements to identify them.
<span id="outer"><a id="inner" href="www.google.com"></a></span>

Now, we have to hide the <span> tag when “href” attribute of <a> tag is empty or invalid. 
Approach:
The first case is when href is empty. So we just need to check for empty href which can be done using vanilla JavaScript.
In the second case, the href is pointing to a file/location. We need to check if it is a valid file/location or not. Now in this case when href is present then we check if it points to some valid file or location. We will do it using jQuery Ajax call. The jQuery Ajax call can be used to exchange data with a web server behind the scenes. If it returns an error then the location of the file is invalid.
Example 1: The below code shows when the href is empty.
HTML
<!DOCTYPE html><html>  <body>    <span id="outer">        <a id="inner" href="">this is link</a>    </span>      <script>        if(document.getElementById("inner")                    .getAttribute("href")=="") {            document.getElementById("outer")                      .style.display = "none";            alert("File does not exist");        }    </script></body>  </html>
Output:
Example 2: Below code is an example when href points to a location.
HTML
<!DOCTYPE html><html>  <head>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" >    </script></head>  <body>    <span id="outer">        <a id="inner" href="https://jsonplaceholder.typicode.com/todos/1">            this is link        </a>    </span>      <script>        // Function to check if url is        // valid by making Ajax call        function doesFileExist(url) {            $.ajax({                headers:{                        'Accept': 'application/json',                    'Content-Type': 'application/json',                    'Access-Control-Allow-Origin': '*'                 },                method:'HEAD',                url:url,                success:function(){                    alert("File exists!")                },                error:function(){                    // Hiding the outer span tag                    $("#outer").hide()                     alert("File does not exists!")                },            })        }          // Storing the location href is pointing to        url=$("#inner").attr("href")         doesFileExist(url)    </script></body>  </html>
Output:
HTML-Misc
JavaScript-Misc
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?