I have created a DIV with attribute contenteditable=true and appended children like span and a with attributes contenteditable=f
Okay! found the solution... its rather simple than what you would think. I am actually inserting html for links, so using here. The tag has attribute set to contenteditable=false and its not getting deleted with a backspace. So I have created an inner level with contenteditable=true for firefox and that did the trick.
This is required in Firefox only. Other browsers treat this as expected with the span having content contenteditable=false.