How to hide span element if anchor href attribute is empty using JavaScript ? Last Updated : 17 Jan, 2023 Comments Improve Suggest changes 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 hide span element if anchor href attribute is empty using JavaScript ? 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 How to Toggle between Hiding and Showing an Element using JavaScript ? Toggle between hiding and showing an element using JavaScript provides the feature of efficient space usage by allowing users to hide content sections they may not need to minimize distractions, leading to a cleaner and more organized layout. Syntaxif (paragraph.style.display === 'none') { paragraph 3 min read How to hide div element by default and show it on click using JavaScript and Bootstrap ? We have to first hide the div and when a user will click the button we need to display that hiden div on the screen. It is helpul for creating any type of form. There are two methods to solve this problem which are discussed below:Â Table of Content Using .show() methodUsing .toggle() methodApproach 2 min read How to Check if element exists in the visible DOM in JavaScript ? This article will show you how to check whether an element exists in the visible DOM or not. For that purpose, there are several methods used but we're going to look at a few of them. Example 1: In this example, the element is searched by document.getElementById('Id') and !! operator is used before 2 min read How to check if an element has any children in JavaScript ? The task is to find out whether an element has child elements or not with the help of JavaScript. We're going to discuss a few techniques. ApproachSelect the Parent Element.Use one of the firstChild, childNodes.length, children.length property to find whether an element has a child or not.hasChildNo 2 min read Like