How to hide an element in response to ajax call

I have a JSF page.

<div id="SaarcImage">

    <h:panelGrid id="saarcImagesTable" columns="4" style="position: relative; top: 50px;"
                 columnClasses="nameColumn" >

        <span class="asterisk">*</span><span class="labels"> #{label.saarcCountryMap}: </span>
        <p:fileUpload id="cityMap" widgetVar="uploader" description="Image"
                      update="countryMap" allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                      auto="true" fileUploadListener="#{countryPages_Detail.imageUpload}">

       </p:fileUpload>

       <p:graphicImage id="countryMap" value="#{countryPages_Detail.imagePath}"
                       width="80" height="50" cache="false">

          <f:event type="preRenderComponent" listener="#{countryPages_Detail.putImage}" />

       </p:graphicImage>

       <h:commandLink id="removeCountryMap" value="remove" title="Remove Picture"
                      style="color: #0d5b7f;text-decoration: underline;"
                      onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">

          <f:ajax event="click" render="countryMap"
                  listener="#{countryPages_Detail.removeImage}"/>

      </h:commandLink>

      ........   //7 more images

    </h:panelGrid>
</div>

      

        
        
        
      

    

Likewise, I have 7 more images per page. Before each image gets rendered, I call the preRenderComponent event. This is how I can remove the link

@ViewScoped
public class CountryPages_Detail {

    private int x = 0;
    private boolean remove;

    public void removeImage() {
        remove = true;      
    } //end of removeImage()

    public void putImage(ComponentSystemEvent event) {
        GraphicImage image1 = (GraphicImage)event.getComponent();
        String imageId = image1.getClientId();

        // Check to ensure that x doesn't greater than the number of images
        if (x > 7) {
            x = 0;
        } //end of if (x > 4)

        if (remove || uploadImage) {

            if (imageId.contains("countryMap")) {
                x = 0;
            } else if (imageId.contains("Image1")) {
             x = 1;
            }
            ....
        }
        ArrayList imagesNames = (ArrayList)session.getAttribute("countryDetailImageNames");

        for(; x<imagesNames.size(); x++) {
            String fileName = imagesNames.get(x).toString();
            if (fileName.contains(imageId)) {
                if (remove) {
                    imagePath = "";
                    imagePath = "/resources/images/no-preview.jpg";
                    imageNames.set(x, "no-preview.jpg"); //also remove from list
                    remove = false;
                    break;
                }
            } else if (fileName.contains("no-preview")) {
                 imagePath = "";
                 imagePath = "/resources/images/no-preview.jpg";
                 x++;
                 break;
            }              
        } //end of for()
    } //end of putImage()
} //end of class CountryPages_Detail

      

        
        
        
      

    

If there is no image, then the default image is no-preview.jpg . If the user uploads an image then my putImage () gets called or if the user clicks on the delete link then the image is set to no-preview.jpg and putImage () gets called. Now I want that if my image path of any image is /resources/images/no-preview.jpg , the delete link next to that image should not be displayed. What's happening now is that no matter if I have no-preview.jpg or another image, my delete link appears. I want to remove the link only if I have an image other than no-preview.jpg... How should I do it? I made a script to check if the Scr attribute of the image matches no-preview.jpg , if yes then it hides all delete links. Here

var saarcImages = $("#SaarcImage #saarcImagesTable tr").each(function(index){

    var $tr = $(this);
    var $image = $tr.find("img");

    if ($image.length != 0) {   //Image exist

        var imageSource = $image.attr("src");       
        var contains = imageSource.indexOf("no-preview.jpg") >= 0; // true

        if (contains) {
            $tr.find("a").fadeOut("slow");
        } else {
            $tr.find("a").fadeIn("slow");
        }
    }
}); //end of .each()

      

        
        
        
      

    

But this script only works on page load. Since I am updating the images with ajax, so if I load any image then the script does not run and the delete link does not appear again. How can I do this if I have a no-preview.jpg image then the delete link does not appear.

thank