title: how to get the current node reference from the range object
body: <p>I am trying to implement backspace functionality with out using html() method as it resets the range object of an element which is not allowed in my case.</p>
  
  <p>Unfortunately, it is not working as expected when I have more than one node. Is there any way that I could get the current node reference from the range object?</p>
  
  <p>Here is the code I tried.</p>
  
  <pre><code>    &lt;div id="myDiv" style="color:red" contenteditable="true"&gt;The color of this text is red.&lt;br&gt;yellow&lt;/div&gt;
          &lt;br /&gt;&lt;br /&gt;
          &lt;button  id='two'&gt;Backspace&lt;/button&gt;
  
  //javascript
  
  $('#two').click(function() 
  {
    var div = document.getElementById ("myDiv");
    var doc = div.ownerDocument || div.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel = win.getSelection();
    var range = sel.getRangeAt(0);
    if (document.createRange) 
    {     // all browsers, except IE before version 9
      var textNode = div.firstChild;      // the text node inside the div
      if (textNode.data.length &gt; 1) 
       {
        var rangeObj = document.createRange ();
        if(range.startOffset&gt; 0)
        {
          // aligns the range to the second character
          rangeObj.setStart (textNode, range.startOffset-1);
          rangeObj.setEnd (textNode, range.startOffset);
        }
  
        rangeObj.deleteContents ();
       }
     }
  
  });
  </code></pre>