contenteditable での backspace

Question

前提・実現したいこと

contenteditable要素で、

<div id="parent" contenteditable="true"><div><br></div></div>

の状態からbackspaceを押しても

<div id="parent" contenteditable="true"></div>

にならないようにしたい

試したこと

・keydownｲﾍﾞﾝﾄで　keyCode === 8(ﾊﾞｯｸｽﾍﾟｰｽ)のときにfalseを返す
・keydownｲﾍﾞﾝﾄで　keyCode === 8(ﾊﾞｯｸｽﾍﾟｰｽ)のときに<div><br><div>をparentにappendChildする
→なぜか<div><br><div>が二つできる（appendしたほうにｸﾗｽを持たせると2つ目だけがｸﾗｽを持っていました）

Answer 1

書かれた状況に限定すれば多少無理やりですが以下のようにすることでbackspaceを無効化できます。
一応指定された場合以外ではbackspaceが効くようにしましたが、状況が限定的過ぎてこれで良いかは微妙です。
例えば、改行しない状態で文字を何かしら打った後それらをすべて消したら<div><br><div>には戻らず<br>になってしまいます。
どのように使用するのかが分からないのでこれ以上は何とも言えません。

/* jQuery */
$('#parent').on('keydown', function(e) {
  if(e.keyCode === 8 && $(this).children('div').length === 1 && $(this).children('div').text() === '') {
    e.preventDefault();
  }
});

/* Vanilla JS */
const parent = document.getElementById('parent');
parent.addEventListener('keydown', function(e) {
  const divChild = document.querySelectorAll('#parent div');
  if(e.keyCode === 8 && divChild.length === 1 && divChild.textContent === undefined) {
    e.preventDefault();
  }
});