How to hide element in responce of 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>

Similarly i have 7 more images on the page. Before every image get render i call preRenderComponent event. Here is how i handle remove 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 present then the default image is no-preview.jpg. If user upload the image, then my putImage() get call or if user click on the remove link then the image set to no-preview.jpg and putImage() get call. Now i want that if my image path of any image is /resources/images/no-preview.jpg then the remove link beside that image should not be appear. What is happening right now is that no matter i have no-preview.jpg or other image my remove link is appearing. I want remove link is only appear if i have an image other than the no-preview.jpg. How can i do it? I made a script that check whether the image Scr attribute conatins the no-preview.jpg, if yes then it hides all the remove links. Here it is

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 runs when page loads. As i am updating images using ajax, so if i upload any image then the script don't run and my remove link doesn't appear again. How can i do it then if i have image no-preview.jpg then the remove link do not appear.

Thanks

来源：https://stackoverflow.com/questions/10125231/how-to-hide-element-in-responce-of-ajax-call