Question

Consider this snippet:

<div>
     <span style="color:red;">a</span>
     <span style="color:blue;">a</span>
     <span style="color:white;">a</span>
</div>

How can you remove style from selected by user text?

---

Edited: to add clarifications from OP:

Thank you for your answers!
I had to be more precise. Sorry for that.
What do I mean by “selected by user text”: selected/highlighted with mouse.
I have many divs with spans inside(just like it is below-no extra ids,classes for spans:/).

[...]
<div>
 <span style="color:red;">a</span>
 <span style="color:blue;">b</span>
 <span style="color:white;">c</span>
</div>
<div>
 <span style="color:red;">d</span>
 <span style="color:blue;">a</span>
 <span style="color:white;">a</span>
</div>
[...]

What I would like to achieve: user selects with mouse “ab”, click button(input type=button) which remove style from selected span/spans. Similar behavior like it is in TinyMCE.

Answer 1

I’m not sure what you mean by “selected by user text”, but if you mean that you want the user to be able to click on the text to remove its color, you could do it this way with jQuery:

Try it out: http://jsfiddle.net/v24fZ/

$(function() {
    $('div > span').click(function() {
        $(this).removeAttr('style');
    });
});

Note that this will affect all <span> elements that are a child of a <div>, so better would be to place an ID attribute on the <div> to make sure you have the right one.

Try it out: http://jsfiddle.net/v24fZ/1/

<div id="myID"><span style="color:red;">a</span><span style="color:blue;">a</span><span style="color:white;">a</span></div>

then

$(function() {
    $('#myID > span').click(function() {
        $(this).removeAttr('style');
    });
});

Also note that this will remove all inline styles. If you only want to remove the color, then do this:

Try it out: http://jsfiddle.net/v24fZ/2/

$(function() {
    $('#myID > span').click(function() {
        $(this).css('color', '');
    });
});

• http://api.jquery.com/removeAttr/
• http://api.jquery.com/css/
• http://api.jquery.com/click/