如何删除contenteditable中带有标签的文本？

Question

我有这样的标记：

<div contenteditable="true">
  <h1>Kind of header</h1>
  <p>Some text</p>
</div>

如果我用鼠标选择Kind of header并按del键，则文本将被删除，但h1标签不会被删除。相反，我会有这样的标记：

<div contenteditable="true">
  <h1><br></h1>
  <p>Some text</p>
</div>

然后，如果我按delete按钮以删除空行，则Some text成为标题。

我该如何解决？我希望在选择h1并按Kind of header按钮时删除delete标签