How to hide span element if anchor href attribute is empty using JavaScript ? Last Updated : 17 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 the “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 <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> Output: Example 2: Below code is an example when href points to a location. HTML <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <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> Output: Comment More infoAdvertise with us Next Article How to get an element by its href attribute ? S SnehashishKalamkar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Check if an element is a child of a parent using JavaScript? In this article, we are going to see the methods by which we can Check if an element is a child of a parent using JavaScript. These are the following methods: Table of Content Using the Node.contains() methodLooping through the parents of the given childUsing the hasChildNodes() methodMethod 1: Usin 5 min read How to Hide an HTML Element by Class using JavaScript? To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.Below are the approaches to hide an HTML element by class:Table of ContentUsing getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn this 3 min read How to Find Out if an Element is Hidden with JavaScript? JavaScript provides the feature of DOM manipulation, allowing developers to dynamically interact with and modify the content and structure of a web page. One common task is determining if an element is hidden, which can be achieved through various methods such as checking the element's display or vi 3 min read How to get an element by its href attribute ? The task is to select the <a> element by its href attribute. A few of the techniques are discussed below. Here we are going to use JQuery to solve the problem. Approach: Use JQuery selector $('a[href=link_to_site]'). Example 1: This example using the approach discussed above. html <script s 2 min read How to Check an Element with Specific ID Exists using JavaScript ? Given an HTML document containing some elements and the elements contain some id attribute. The task is to check whether the element with a specific ID exists or not using JavaScript. Below are the approaches to check an element with specific ID exists or not using JavaScript:Â Table of ContentApproa 3 min read How to check an HTML element is empty using jQuery ? Given an HTML document and select an element from the HTML document and check that element is empty or not. There are two methods used to solve this problem which are discussed below: Method 1: Using the ":empty" selector: The element to be checked using is() method. The is() method is used to check 3 min read Like