remove underline with jQuery

Question

I have a link like:

HTML:

<a href="#" title=""> <img src="stack.png" alt="" title="" /> stackoverflow </a> 

CSS:

a { text-decoration: underline}

I want to remove the underline from the image.

I tried:

a img {text-decoration:none} 

But it not works.

BS: I can do that if I added a display:block to img but that can cause a damage for the rest of the site, also I won't add a specific class for this section.

Could I do that with jQuery?

Answer 1

You should do this with CSS.

You could add an inline style to that link:

<a href="#" style="text-decoration:none;"> <img src=...etc /> stackoverflow </a>

Or you could add a class to that link:

<a href="#" title="" class="img"> <img src=...etc. /> stackoverflow </a>

In your css...

a.img {text-decoration:none;}

EDIT:

If you cannot alter the html, then use jQuery:

$('a img').parent().css('textDecoration','none')

(This is similar to what is above, but targets the parent of the img -- that is the a -- and then changes the style appropriately.)

Fiddle http://jsfiddle.net/jasongennaro/vM55K/

EDIT 2:

If that is the only child element in an a, you could use this:

 $('a').children().css('textDecoration','none')

Fiddle http://jsfiddle.net/jasongennaro/vM55K/1/

Answer 2

This should do it for you.

$('a img').css('text-decoration','none')

Answer 3

You could try something like this:

$("a img").parentsUntil("a").css("text-decoration","none");