Wie bekomme ich die aktuelle Knotenreferenz vom Bereich Objekt

Question

Ich versuche, Backspace-Funktionalität ohne Verwendung der html() -Methode zu implementieren, da es das Bereichsobjekt eines Elements, das in meinem Fall nicht erlaubt ist, zurücksetzt.

Leider funktioniert es nicht wie erwartet, wenn ich mehr als einen Knoten habe. Gibt es eine Möglichkeit, die aktuelle Knotenreferenz vom Bereichsobjekt zu erhalten?

Hier ist der Code, den ich ausprobiert habe.

<div id="myDiv" style="color:red" contenteditable="true">The color of this text is red.<br>yellow</div> 
     <br /><br /> 
     <button id='two'>Backspace</button> 

//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 > 1) 
    { 
     var rangeObj = document.createRange(); 
     if(range.startOffset> 0) 
     { 
     // aligns the range to the second character 
     rangeObj.setStart (textNode, range.startOffset-1); 
     rangeObj.setEnd (textNode, range.startOffset); 
     } 

     rangeObj.deleteContents(); 
    } 
    } 

}); 

Answer 1

rangeObj.setStart (textNode, range.startOffset-1); 
     rangeObj.setEnd (textNode, range.startOffset); 

Hinzufügen des folgenden statt obigen Zeilen fixiert mein Problem.

rangeObj.setStart (range.startContainer, range.startOffset-1); 
    rangeObj.setEnd (range.startContainer, range.startOffset);