непонятно

я так рассуждаю - элементы на экране это массив, нумерованый список и данные для отображения это массив
доступ к ним по одинаковому порядковому номеру в списке-массиве

но после добавления удаления элементов на экране исчезает соответствие порядковых номеров

Должна быть синхронизация. Вы же знаете какой элемент был удален - удаляете элемент массива

если проблема в том чтобы по удаленному элементу найти связь с элементом массива - можете при создании добавлять ему атрибут номера. Что-то типа data-index="someIndex"

товарищи как эта штуковина называется?
классика же
наверняка есть паттерн или шаблон для работы со списками - с динамическим добавлением удалением элементов

про data- первым делом и подумал но пока не придумал как его использовать

нужна помощь зала

Вообще обычно никто не парится с прямым управлением домом. Есть шаблонизаторы, которые решают все эти проблемы. Шаблонизаторы бывают как простые (которые полностью передергивают дом), так и покруче (которые запоминают связи данных и конретной текстовой ноды). Выбор их зависит от задачи и необходимости оптимизаций.

я хочу понять устройство велосипеда ))
мне надо самому понять и собрать код а не копировать чужое
мне надо на практике доучиться

вот эту проблему решу и тогда кажется смогу собрать редактор
еще сразу же думаю как сделать отмены действий: там нет пока пролблем

Хороший шаблонизатор (особенно такой как вы хотите с частичным обновлением) - это не паттерн, а много-много ООП кода.

а почему это называется шаблонизатор

Потому что вам дужно выводить данные в определенном формате (шаблоне)

Например шаблон модального окна с использованием шаблонизатора underscore может выглядеть так:

<div>
   <div class="title"><%= title %></div>
   <div class="content"><%= content %></div>
   <div class="buttns">
       <% for (var i = 0; i < buttons.length; i++) { %>
            <button><%= button[i].text %></button>
       <% } %>
   </div>
</div>

Хочу получить верстку модального окна с 2 кнопками, заголовком и контентом:

_.template(modalTpl)({
      title: "Заголовок",
      content: "Контент",
      buttons: [{text: "Да"}, {text: "Нет"}]
   });

Таким образом мы уменьшаем в коде прямую работу с домом. Это удобно, особенно когда есть много похожих операций.