steve Kim steve Kim - 8 days ago 5
Javascript Question

Contenteditable: prevent inner element from being deleted

I have a simple contenteditable markup:

<div class="example" contenteditable="true">
<div class="inside">Some content</div>
</div>


When I delete the "
Some content
", then
class="inside"
div also gets deleted. Is there a way to prevent the inside div from being removed when contents are deleted?

For example, this is the look I am trying to make once the contents are deleted.

<div class="example" contenteditable="true">
<div class="inside"></div> <!-- The div is not deleted -->
</div>


I looked around but doesn't seem like there is a clear answer.

Any help will be much appreciated.

Thank you.

Answer

.inside, .example {
  display: inline;
}
<div class="example" contenteditable="true">
  <div class="inside">Some content</div>
</div>

Maybe there's a style that is inline-level element.

Since the width will be 0% when you remove the content. You cannot click it again or add any content.

So, my solution will be

.inside, .example {
  display: block;
}

You can specify width if you want. :)

.inside, .example {
  display: block;
}
<div class="example" contenteditable="true">
  <div class="inside">Some content</div>
</div>