Как запретить удаление первого тега li из текстового поля div contenteditable?

Подскажите, пожалуйста, как запретить удаление самого первого тега LI в текстовом редакторе div contenteditable? По умолчанию в текстовом редакторе установлен нумерованный список, который при нажатии на энтер создает второй, третий по нумерации список, но когда нужно удалить весь текст, удаляются соответственно и все теги li. Нужно чтобы самый первый LI список не удалялся, а лишь текс.

.fr-element {border: 1px solid red;padding:20px;}
li {border-bottom: 1px solid #666;padding: 5px 0 5px;margin-bottom:10px;}
<div style="min-height: 290px;" class="fr-element fr-view" dir="ltr" aria-disabled="false" spellcheck="true" contenteditable="true">
<ol>
<li>Удаляем текст без возможности удалить первый список LI.</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
<li>Удаляем текст с тегом li</li>
</ol>
</div>


Ответы (1 шт):

Автор решения: Denis640Kb

Можно попробовать так:

    var elem = document.getElementsByClassName('fr-view');
    document.onkeydown = function(e) {
        if (elem[0].innerText == "Введите первый пункт"){
            elem[0].innerHTML = "<ol><li></li></ol>";
        }
        if (event.code == 'Backspace') {
            if (elem[0].innerText.length <= "1"){
                elem[0].innerHTML = "<ol><li>Введите первый пункт</li></ol>";
            }
        }
    };
    .fr-element {border: 1px solid red;padding:20px;}
    li {border-bottom: 1px solid #666;padding: 5px 0 5px;margin-bottom:10px;}
<div style="min-height: 290px;" class="fr-element fr-view" dir="ltr" aria-disabled="false" spellcheck="true" contenteditable="true">
    <ol>
        <li>Удаляем текст без возможности удалить первый список LI.</li>
        <li>Удаляем текст с тегом li</li>
        <li>Удаляем текст с тегом li</li>
        <li>Удаляем текст с тегом li</li>
        <li>Удаляем текст с тегом li</li>
    </ol>
</div>

→ Ссылка