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=false.

Wanted to test if the entire node be deleted with a single backspace and to my surprise Firefox couldn't delete the elements.

Also, this works as expected in all major desktop browsers except Firefox.
Any clues on this or what could be the possible workaround?

Found the exact issue on bugzilla here.

Answer 1

Okay! found the solution... its rather simple than what you would think. I am actually inserting html for links, so using <a> here. The <a> tag has attribute set to contenteditable=false and its not getting deleted with a backspace. So I have created an inner <span> level with contenteditable=true for firefox and that did the trick.

<div contentEditable="true">
   <a href="your/url/path" contentEditable="false">
     <span contentEditable="true">link here</span>
   </a>
</div>

This is required in Firefox only. Other browsers treat this as expected with the span having content contenteditable=false.