1

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

<span style="display:inline-block; vertical-align:middle;" contenteditable="false">
  <span style="display:block; min-width: 20px;border-bottom:1px solid black; text-align: center; outline: none;" contenteditable>6</span>
  <span style="display:block; min-width: 20px;text-align: center;outline: none;" contenteditable>7</span>
</span>

我的问题是，当我尝试删除这个“分数”跨度（外部跨度，它应该是可删除的，因为这是一个数学所见即所得程序）时，它只是删除了两个内部 contenteditable 跨度的内容。当我尝试删除它时（显然是从外部跨度外部但在 contenteditable div 内部），我希望删除所有三个元素。我不希望外部跨度仍然挥之不去。

有什么解决办法吗？

更新：如果没有办法做到这一点，当用户按下大分数跨度旁边的删除键时，有没有办法选择整个跨度元素及其内容？

4

1 回答 1

3

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

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

并使用它来删除它：

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

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

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

有关示例，请参见此 jsfiddle

于 2012-08-29T07:19:03.650 回答