Javascript 如何删除包含可编辑跨距的整个跨距元素？

我有一个contenteditable

div

。在里面，我放了一个“分数”跨度，关于。这是我当前的代码（跨距中的数字只是虚拟数字）：

6.
7.

我的问题是，当我试图删除这个“分数”跨度（外部跨度，它应该是可删除的，因为这是一个数学WYSIWYG程序），它只是删除两个内部内容可编辑跨度的内容。当我试图删除它时（显然是从外部范围之外但在contenteditable div内部），我希望所有三个元素都被删除。我不想让外边的跨度仍然挥之不去

有什么解决办法吗

---

更新：如果没有办法，当用户按下大跨度旁边的delete键时，是否有办法选择整个跨度元素及其内容？

只需为顶部跨度提供一个id：

<span id="editfraction" 
      style="display:inline-block; vertical-align:middle;" 
      contenteditable="false">

如果要在用户按下“删除”按钮时删除跨度，请使用ID，并结合contentEditable跨度上的数据属性

<span ... data-ondeleteId="#editx" contenteditable>6</span>

6

---

请参见示例

是的，但实际上是用户删除了它（很抱歉，我很可能没有说清楚），而且他们还可以插入多个分数，所以很可能这不起作用。Hi@think123:我制作了一个JSFIDLE，请参见编辑后的答案。这就是你的意思吗？只需编辑右下面板中的一个值，然后按delete键+1哦，是的，我明白了。现在还有一件事-当用户在外部分数范围外按delete键时，页面会自动选择整个外部范围并包含其所有内容，以便于删除？如果您不理解我的意思，例如在您的示例中，如果他们试图在未选择分数的情况下删除分数，代码能自动选择整个分数吗？你能展示一下你的尝试吗？或者至少用一点js来更好地理解你的问题？不，这其实很简单——我正试图创建一个如上所述的数学所见即所得程序，我被困在用户创建“分数”后，他们很难删除它的部分。

$('#editfraction').remove();

<span ... data-ondeleteId="#editx" contenteditable>6</span>