Well the issues with removing underline was that the selection did not take into account the wrapping <u>
element. The content inside <u>
was removed and new content with <font>
tag inserted inside <u>
tag.
I tried to go up one node and check if it is <u>
and then remove the node:
if (selectionIsUnderlined()) {
node = range.createContextualFragment(
"<font style='text-decoration: none !important'>" + sell + "</font>");
var nd = sel.anchorNode;
if(nd.nodeName!=='span'){
nd = nd.parentNode;
}
if (nd) {
nd.remove();
}
The updated fiddle is here
PS:- this is just an experiment. please consider performance/browser compatibility and other pros/cons before using it.