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.

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.

• javascript
• jquery
• contenteditable

• jsfiddle/rzm156px it won't be deleted. – hdotluna Commented Dec 1, 2016 at 2:04
• 2 Hmm That's weird. on Chrome, everything gets deleted except the top div with contenteditable attr. – Steve Kim Commented Dec 1, 2016 at 2:08
• No. Something in your css breaking the code. – hdotluna Commented Dec 1, 2016 at 2:10
• I see. I will double check it. – Steve Kim Commented Dec 1, 2016 at 2:13
• Did you ever figure this out? I have same problem with <p> inside a contenteditable div – volume one Commented Apr 26, 2020 at 16:59

4 Answers 4

const example = document.querySelector(".example")

example.addEventListener("keydown", (e) => {
 if (e.keyCode == 8 || e.keyCode == 46) { // delete and del keys
   if (example.children.length === 1) { // last inner element 
     if (example.children[0].innerText < 1) { // last element is empty
       e.preventDefault()
     }
   } 
 })

This might help someone

function onpaste(e: ClipboardEvent) {
  e.preventDefault();

  const selection = window.getSelection();
  // Don't allow deleting nodes
  if (selection.anchorNode.isSameNode(selection.focusNode)) {
    // get text representation of clipboard
    const text = e.clipboardData.getData("text/plain");

    // insert text manually, but without new line characters as can't support <br/>s yet
    document.execCommand("insertHTML", false, text.replace(/\n/g, ""));
  }
}

function onkeydownInEditable(e: KeyboardEvent) {
  if (e.key === "Enter") {
    e.preventDefault();
  }
  if (e.key === "Backspace" || e.key === "Delete" || e.key === "Paste") {
    const selection = window.getSelection();
    // Don't allow deleting nodes
    if (!selection.anchorNode.isSameNode(selection.focusNode))
      e.preventDefault();
  }
}

 elementEditing.addEventListener("keydown", onkeydownInEditable);
 elementEditing.addEventListener("paste", onpaste);

You have to add contenteditable="true" to inside elements:

<div class="example">
     <div class="inside" contenteditable="true">Some content</div>
     <div class="inside">Some content</div> <!-- This one will not be deleted -->
     <div class="inside" contenteditable="true">Some content</div>
</div>

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