javascripthtmlfbjs

How to delete an HTML element inside a div with attribute contentEditable?


have this html:

<div id="editable" contentEditable="true"  >
    <span contentEditable="false" >Text to delete</span>
</div>

need that the span (and all text inside) is removed with a single backspace, is it possible?


Solution

  • This turned out to be more complicated than I thought. Or I've made it more complicated than it needs to be. Anyway, this should work in all the big browsers:

    function getLastTextNodeIn(node) {
        while (node) {
            if (node.nodeType == 3) {
                return node;
            } else {
                node = node.lastChild;
            }
        }
    }
    
    function isRangeAfterNode(range, node) {
        var nodeRange, lastTextNode;
        if (range.compareBoundaryPoints) {
            nodeRange = document.createRange();
            lastTextNode = getLastTextNodeIn(node);
            nodeRange.selectNodeContents(lastTextNode);
            nodeRange.collapse(false);
            return range.compareBoundaryPoints(range.START_TO_END, nodeRange) > -1;
        } else if (range.compareEndPoints) {
            if (node.nodeType == 1) {
                nodeRange = document.body.createTextRange();
                nodeRange.moveToElementText(node);
                nodeRange.collapse(false);
                return range.compareEndPoints("StartToEnd", nodeRange) > -1;
            } else {
                return false;
            }
        }
    }
    
    document.getElementById("editable").onkeydown = function(evt) {
        var sel, range, node, nodeToDelete, nextNode, nodeRange;
        evt = evt || window.event;
        if (evt.keyCode == 8) {
            // Get the DOM node containing the start of the selection
            if (window.getSelection && window.getSelection().getRangeAt) {
                range = window.getSelection().getRangeAt(0);
            } else if (document.selection && document.selection.createRange) {
                range = document.selection.createRange();
            }
    
            if (range) {
                node = this.lastChild;
                while (node) {
                    if ( isRangeAfterNode(range, node) ) {
                        nodeToDelete = node;
                        break;
                    } else {
                        node = node.previousSibling;
                    }
                }
    
                if (nodeToDelete) {
                    this.removeChild(nodeToDelete);
                }
            }
            return false;
        }
    };