div contentEditable与非contentEditable子代不能删除。

Question

我对可满足的行为感到非常困惑，因为有时是工作，有时不是。在这个例子中是不工作的。当我删除所有然后工作

.textarea{
  min-height: 100px;
}

.result-variable {
  display: inline-block;
  border-bottom: dashed 1px #382781;
  font-weight: 200;
}

<div class="textarea" contenteditable="true">This i some data<br><span class="result-variable" contenteditable="false">Data 1 (can't remove)</span><br><span class="result-variable" contenteditable="false">Data 2 (cant remove)</span></div>

Answer 1

问题将出现在 <br>. 如果你想要一个新的行，你可以使用的是 white-space: pre. 但我建议阅读有关问题与 pre

.textarea{
  min-height: 100px;
}

.result-variable {
  display: inline-block;
  border-bottom: dashed 1px #382781;
  font-weight: 200;
}

<div class="textarea" contenteditable="true" style="white-space: pre">This i some data
<span class="result-variable" contenteditable="false">Data 1 (can't remove)</span>
<span class="result-variable" contenteditable="false">Data 2 (cant remove)</span>
</div>