Question

I have an image that need to be removed, but I can’t have access to touch the html code, the only way is to using JQuery. So I tried to find the image and given the image as display none but it doesn’t get work…

$('td.Headerbg').find('img').css('display', 'none');

the class contained td which is a part of nested table like this..

 <tr>
            <td>
                <table cellspacing="0" cellpadding="0" width="100%" border="0">
                    <tr>
                        <td class="Headerbg">
                            <img src="images/header.gif" alt="" />

                        </td>
                    </tr>
                </table>

            </td>
        </tr>

Is my code running on wrong way?

Looking forward to your replies..

Answer 1

Your selector will work with the code you have provided. Make sure you are running your jQuery code at the end of the HTML document (just before the closing </body> tag) or running it within a document.ready event handler:

$(function () {
    $('.Headerbg').find('img').css('display', 'none');
});

If you run your code before the DOM elements are available then the $('.Headerbg') won’t select anything and nothing will happen, this is why it is important to use the document.ready event handler or to put you code at the end of your HTML document (which is the best way, it will allow your page to load more quickly).

If you are just running this code when the page loads then you could also use CSS which won’t have any flickering of the images, they will just always be hidden:

.Headerbg img {
    display : none;
}