Backspace doesn't delete inner html tags of a contenteditable DIV in Firefox

Question

I have created a DIV with attribute contenteditable=true and appended children like span and a with attributes contenteditable=f

Answer 1

I have faces the same terrible bug and had no choice but to make an elaborate javascript-based solution that listens to keypress events and if backspace was pressed, and the caret was just at the start offset of a text node, and the node before it is an element node, then delete that whole element node.

// credit: https://stackoverflow.com/a/25397485/104380
var isFF = !!navigator.userAgent.match(/firefox/i)
var editableElm = document.querySelector('div')

// listen to any key press
if( isFF )
  editableElm.addEventListener('keydown', onKeydown)

function onKeydown(e){
  if( e.key == "Backspace"  ){
    var selection = document.getSelection();
    
    // if caret is at the begining of the text node (0), remove previous element
    if( selection && selection.anchorOffset == 0 )
      selection.anchorNode.previousSibling.parentNode.removeChild(selection.anchorNode.previousSibling)
  }
}

  Try deleting theme marked words on Firefox ok?