Remove style from selected range / text in div
Consider this snippet:
<div>
<span style="color:red;">a</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
How to remove style from user selected text?
Edited: to add clarification from the OP:
Thank you for your responses! I should have been more accurate. Sorry for that. What I mean by "user-selected text": selected / highlighted with the mouse. I have many divs with internal spaces (same as below - no additional identifiers, classes for intervals: /).
[...]
<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: the user selects with the mouse "ab", the click button (input type = button), which removes the style from the selected range / intervals. This behavior is similar to TinyMCE.
+3
3
, " ", , , , jQuery:
$(function() {
$('div > span').click(function() {
$(this).removeAttr('style');
});
});
, <span>, <div>, <div>, , .
: 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>
$(function() {
$('#myID > span').click(function() {
$(this).removeAttr('style');
});
});
, . , :
: http://jsfiddle.net/v24fZ/2/
$(function() {
$('#myID > span').click(function() {
$(this).css('color', '');
});
});
+6
" "
click, :
var oldState = ""; //Code is untested, but I've written something similar recently
var $prevDiv;
$('#parentContainer span').click(function() {
if(!$(this).hasClass('selected')) //tracking what is currently selected.
{
if($prevDiv != null)
{
$prevDiv.removeClass('selected');
$prevDiv.attr('style', oldState);
}
$prevDiv = $(this);
$(this).addClass('selected');
oldState = $(this).attr('style');
$(this).attr('style', '');
}
else
{
//do nothing unless you need some reselected logic
}
}
, @patrick dw api , .
+1
I totally agree with Patrick.
You can try the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<span style="color:red;">a</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
$(this).removeAttr("style");
});
});
</script>
</body>
</html>
+1