remove underline with jQuery

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 tr开发者_开发百科ied:

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?

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/

This should do it for you.

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

You could try something like this:

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

What about:

$("img[src="stack.png"]).css("text-decoration","none");

**Edit

Is your issue how to add styles to the specific element without effecting the rest of the DOM? Or is your issue what styles you need to set to specifically get rid of the underlines?

Maybe it's a specificity problem?

Try removing borders and all decoration using a more specific CSS selector:

a > img {
  border: none;
  text-decoration: none;
}

You might want to use CSS: a img {border: none} or you could try setting the image to display: inline-block

I think it's better to seperate the anchor for img and for text. Try the following markup:

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

Demo: http://jsfiddle.net/XFVMQ/

A second solution, according my comment, is to add margin-bottom:-3px for a img.

Demo: http://jsfiddle.net/XFVMQ/

A third solution to add outline: 3px solid white; for a img this will override the underline, change it to the proper color.

Demo: http://jsfiddle.net/XFVMQ/6/