How to hide the whole span if there is no file in “href” direction

I have problem with hiding empty links.. please can someone help me.:

<a href="/sunsetplanlama/<?php echo $sonuc['proje_ismi'] ?>/kumas_1.png"  data-lightbox="kumas" data-title="<?php echo $sonuc['proje_ismi'] ?>" class="tab active"  >
K1
</a>

if "href="/sunsetplanlama/<?php echo $sonuc['proje_ismi'] ?>/kumas_1.png" going no where than I want the hide "K1" letter..

how can I do that?

Answer

A few points to consider:

• Server-side solutions are inappropriate: You want to test for resource availability at the client and that can only be achieved with the client being the agent.
• Checking for resources may take time, in particular more time than is needed to render the html at the client. Removing visible markup ( eg. the span element of the example ) contingent on failure in retrieving resources may result in rendered material showing up briefly and disappearing again when the intent is not to show it at all. So the better strategy is to hide it by default and present it as soon as the resource availability has been ascertained.

function ready () {
  let anl_toTest = Array.from ( document.querySelectorAll ( '.fa-sign-x' ) )
    ;
  
  anl_toTest.forEach ( (e_span) => {
    let myRequest = new Request ( e_span.parentNode.href)
      ;
     
    // Fetch API. See [this MDN section](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for details and code samples  
    fetch(myRequest)
      .then (
          function(response) {
            if (response.ok) { // Resource was successfully retrieved, show the link 
              e_span.style.display = "inline";
            }
          }
        , function (e) {
            console.log(`Failed on '${myRequest.url}': ${e.message}.`);
          }
      );
   });
} // ready

window.addEventListener ( 'load', ready );

.fa-sign-x {
  display: none;
}

<a href="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y"  data-lightbox="kumas" data-title="Pattern" class="tab active"  >
   <span  class="fa-sign-x" >Pattern</span>
</a>&nbsp;
<a href="https://www.example.com/whatever.jpg"  data-lightbox="kumas" data-title="Failed" class="tab active"  >
   <span  class="fa-sign-x" >Failed</span>
</a>&nbsp;
<a href="https://secure.gravatar.com/avatar/1a0ea6b0656f0af322419bd6a607598f?s=100&d=retro&r=g"  data-lightbox="kumas" data-title="Polar Bear" class="tab active"  >
   <span  class="fa-sign-x" >Polar Bear</span>
</a>