div contentEditable with non-contentEditable child can't remove

Question

I am very confused by contenteditable behavior, because sometimes is working and sometimes not. In this example is not working. When I remove all
then works

.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>

Does this answer your question? [Focusing on nested contenteditable element](https://stackoverflow.com/questions/40907091/focusing-on-nested-contenteditable-element) — Dima Vak, May 23 '20 at 08:54
no, because I have non-editable nested children and I just want to remove non-editable span by press backspace — Petr Klein, May 23 '20 at 09:12

Dima Vak · Answer 1 · 2020-05-23T15:55:28.297

The problem will be with <br>. If you want a new line, you can use white-space: pre. But I advise to read about the problem with 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>

div contentEditable with non-contentEditable child can't remove

1 Answers1