title: Deleting background color from one word in a highlighted sentence
body: <p>I can highlight text by creating a span but when I go to create a span in that highlighted span text with background color transparent, it inherits the parent tag background color still instead of adopting a background color of transparent.
  The text will, however, adopt any color that is not transparent.
  I'm basing my highlighting of text off of: <a href="http://help.dottoro.com/ljcvtcaw.php" rel="nofollow noreferrer">http://help.dottoro.com/ljcvtcaw.php</a>
  and more specifically <a href="http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm" rel="nofollow noreferrer">http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm</a>.</p>
  
  <p>I've also used document.execCommand('ForeColor', false, yellow) in the past which was really intuitive and would delete or combine span tags but was never able to delete the span tags created in that way.</p>
  
  <pre><code>function Highlight(color) {
      document.designMode = "on";
      var sel = window.getSelection();
      sel.removeAllRanges();
      var range = document.createRange();
      range.setStart(editor.startContainer, editor.startOffset);
      range.setEnd(editor.endContainer, editor.endOffset);
      sel.addRange(range);
      if (!sel.isCollapsed) {
        var range = sel.getRangeAt(0);
        var startContainer = range.startContainer;
        var startOffset = range.startOffset;
        var endContainer = range.endContainer;
        var endOffset = range.endOffset;
  
    if(startContainer == endContainer){
      ColorizeNodeFromTo(startContainer, color, startOffset, endOffset);
    }
    else {
      if(startContainer.firstChild){
        var startLeaf = startContainer.childNodes[startOffset];
      }
      else {
        var startLeaf = GetNextLeaf(startContainer);
        ColorizeLeafFromTo(startContainer, color, startOffset, -1);
      }
      if(endContainer.firstChild){
        if(endOffset &gt; 0){
          var endLeaf = endContainer.childNodes[endOffset-1];
        }
        else{
          var endLeaf = GetPreviousLeaf(endContainer);
        }
      }
      else{
        var endLeaf = GetPreviousLeaf(endContainer);
        ColorizeLeafFromTo(endContainer, color, 0, endOffset);
      }
      while(startLeaf){
        var nextLeaf = GetNextLeaf(startLeaf);
        ColorizeLeaf(startLeaf, color);
        if(startLeaf == endLeaf){
          break;
        }
        startLeaf = nextLeaf;
      }
    }
  }
  </code></pre>
  
  <p><strong>Solution</strong></p>
  
  <p>I've gone back and refactored my code using the execCommand function.</p>
  
  <pre><code>if (!sel.isCollapsed) {
     if (!document.execCommand("HiliteColor", false, color)) {
       document.execCommand("BackColor", false, color);
     }
  }
  </code></pre>
  
  <p>This dynamically creates and deletes spans how I want.</p>