La tarea es ocultar la etiqueta <span> cuando el atributo href de la etiqueta <a> no está presente o no es válido.
Consideremos que tenemos la etiqueta <a> dentro de la etiqueta <span> . Se verá similar a esto:
<span><a href="www.google.com"></a></span>
Ahora añadimos el id a los elementos para identificarlos.
<span id="outer"><a id="inner" href="www.google.com"></a></span>
Ahora, tenemos que ocultar la etiqueta <span> cuando el atributo «href» de la etiqueta <a> está vacío o no es válido.
Acercarse:
- El primer caso es cuando href está vacío. Entonces, solo tenemos que verificar si hay href vacío, lo que se puede hacer usando JavaScript estándar.
- En el segundo caso, el href apunta a un archivo/ubicación. Necesitamos verificar si es un archivo/ubicación válido o no. Ahora, en este caso, cuando href está presente, verificamos si apunta a algún archivo o ubicación válidos. Lo haremos usando la llamada jQuery Ajax. La llamada jQuery Ajax se puede utilizar para intercambiar datos con un servidor web en segundo plano. Si devuelve un error, la ubicación del archivo no es válida.
Ejemplo 1: El siguiente código muestra cuando el href está vacío.
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>
Producción:
Ejemplo 2: El siguiente código es un ejemplo cuando href apunta a una ubicación.
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por SnehashishKalamkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA