What happens when you delete text by Backspace in a contenteditable element?
Published: 2022-07-25 15:13:00

I confirmed contenteditable's behavior to better understand how it works.

## Before you read...

You must know

- [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text)
- [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
  - [Block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)
  - [Inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)

## Text node
Suppose we have the following HTML with no element but a text node inside a contenteditable element.

```html
<div contenteditable="true">
  This is a text node.(caret)
</div>
```

Depending on your browser, there are 2 patterns after you delete the whole text by Backspace.


### Chrome and Edge

Nither text node nor element is created.

```html
<div contenteditable="true">
  (caret)
</div>
```

### Safari and Firefox

`<br>` is generated and you CANNOT delete it.

```html
<div contenteditable="true">
  (caret)<br>
</div>
```

## Block-level element

Suppose we have a p element inside a contenteditable element.

```html
<div contenteditable="true">
  <p>This is a p element.(caret)</p>
</div>
```

### Chrome, Safari and Edge
`<br>` is created inside the p element after you delete the whole text.

```html
<div contenteditable="true">
  <p>(caret)<br></p>
</div>
```

Then the element is gone after you press one more Backspace.

```html
<div contenteditable="true">
  (caret)
</div>
```

This behavior is the same for other block-level elements, such as h1 to h6, div and so on.

### Firefox

Firefox is strange. It inserts `<br>` when a letter before a space is deleted like below.

```html
<div contenteditable="true">
  <p>A p element is (caret)<br></p>
</div>
```

The `<br>` remains until you reach the head of the line, and when you delete the whole text, it becomes the same state as the other browsers in the end.

```html
<div contenteditable="true">
  <p>(caret)<br></p>
</div>
```

Then the element is gone after you press one more Backspace.

```html
<div contenteditable="true">
  (caret)
</div>
```

## List

I'll cover ul and ol elements as their behavior is different from other block-level elements.

```html
<div contenteditable="true">
  <ul>
    <li>Item 1(caret)</li>
  </ul>
</div>
```

After you delete the whole text, the li element looks the same as other block-level elements.

```html
<div contenteditable="true">
  <ul>
    <li>(caret)<br></li>
  </ul>
</div>
```

However it goes differently after you press one more Backspace.

### Chrome, Safari and Edge

`<div><br></div>` is created.

```html
<div contenteditable="true">
  <div>(caret)<br></div>
</div>
```

And `<div><br></div>` will be gone by one more Backspace.

```html
<div contenteditable="true">
  (caret)
</div>
```

### Firefox

When it comes to Firefox, all the elements are gone. It doesn't create `<div><br></div>`.

```html
<div contenteditable="true">
  (caret)
</div>
```

## Inline element

```html
<div contenteditable="true">
  <span>This is a span element.(caret)</span>
</div>
```

### Chrome, Safari and Edge

When you delete the whole text, the span element is gone and `<br>` is inserted.

```html
<div contenteditable="true">
  (caret)<br>
</div>
```

### Firefox

Firefox inserts `<br>` again when a letter before a space is deleted.

```html
<div contenteditable="true">
  <span>A p element is (caret)<br></span>
</div>
```

The `<br>` remains until you reach the head of the line and you CANNOT delete the `<span><br></span>` this time. What in the world is that?

```html
<div contenteditable="true">
  <span>(caret)<br></span>
</div>
```

## References

- [contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable)
- [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text)
- [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
  - [Block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)
  - [Inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)