Contenteditable 元素在修改后更改 ID答案

【问题标题】：Contenteditable elements change ID after modificationsContenteditable 元素在修改后更改 ID
【发布时间】：2018-01-19 14:52:35
【问题描述】：

我对内容可编辑的 div 烦人的行为有一些问题。我里面有一些元素，假设代码如下所示：

<div contenteditable="true">
    <p id="element-id-1">element-id-1</p>
    <p id="element-id-2">element-id-2</p>
</div>

除一件事外，所有内容都按预期工作 - 当我三次单击第一段以选择并删除它（使用删除或退格键）时，第二段内容“跳转”到它的位置，但保留第一段 ID。有没有办法防止这种情况，所以在我三次单击第一段并将其删除后，第二段保持相同的 ID（#element-id-2）？ JSFiddle 在这里描述了功能：https://jsfiddle.net/t8e28bmx/ 谢谢！

【问题讨论】：

当你点击删除和三次点击甚至选择内部整个html标签时，它会删除所有带有标签的内容。

标签： javascript jquery html css dom

【解决方案1】：

试试这个代码。

<div contenteditable="plaintext-only">
  <p id="element-id-1">element-id-1</p>
  <p id="element-id-2">element-id-2</p>
</div>

参考：https://w3c.github.io/editing/contentEditable.html#h-contenteditable

【讨论】：

谢谢，但它仍然保留第一段ID。

【解决方案2】：

<div>
<p contenteditable="true" id="element-id-1">element-id-1</p>
<p contenteditable="true" id="element-id-2">element-id-2</p>
</div>

【讨论】：