javascript - Contenteditable:防止内部元素被删除

Question

我有一个简单的内容可编辑标记:

<div class="example" contenteditable="true">
     <div class="inside">Some content</div>
</div>

当我删除“Some content”时，class="inside" div也会被删除。有没有办法防止删除内容时删除内部 div？

例如，这是我在删除内容后尝试做出的外观。

<div class="example" contenteditable="true">
     <div class="inside"></div> <!-- The div is not deleted -->
</div>

我环顾四周，但似乎没有明确的答案。

任何帮助将不胜感激。

谢谢。

Answer 1

const example = document.querySelector(".example")

example.addEventListener("keydown", (e) => {
 if (e.keyCode == 8 || e.keyCode == 46) { // delete and del keys
   if (example.children.length === 1) { // last inner element 
     if (example.children[0].innerText < 1) { // last element is empty
       e.preventDefault()
     }
   } 
 })