Удаление элемента списка в редактируемом списке содержимого наносит ущерб моей дом

Question

Мой начальный код:

<div>
<ul id="UL1" contenteditable="true">
<li>Test</li>
</ul>
</div>

если я удаляю элемент списка или создаю новый элемент списка, создавая ввод, а затем снова нажимая ввод, список становится недоступным для редактирования, и он забивает мой DOM (сохраненный с помощью javascript):

<div>
</div><ul id="UL1">
<li>Test</li><li>Best</li></ul><p><br /></p><ul>
</ul><div>
</div>

Почему это происходит и что я могу сделать, чтобы предотвратить это?

Answer 1

Я решил это, используя следующее:

1. Захват щелкаемого элемента списка в событии щелчка с использованием Event.target. Целью этого события является элемент списка. Я храню это в переменной (то есть myPackage.currentLI = e.target)

2. Добавьте ключевой слушатель к моим OL / UL и отследите клавиши вверх, вниз и введите и настройте myPackage.currentLI, используя .nextSibling и .previousSibling

3. В том же ключевом приемнике определите условия (введите, возврат из LI без содержимого) и вызовите preventDefault для события