Добавление элементов из json и последующее удаление?

Вопрос наверно не корректно я задал. Мне нужно понять как удалять элементы, которые вышли из блока и только после этого добавлять новые

Хм, то есть у нас есть какая-то строка, которая непрерывно движется вниз. Как только они попадают за границы блока, где это всё находится, они удаляются, а при этом создаются новые сверху. Так? Возможно, во мне дело, но я не слишком понимаю суть всё ещё.

forgetable: да. именно так как вы написали.

Самый элементарный и "в лоб" способ подходит, если у нас фиксированная высота. Вот у нас есть JSON, мы переводим его в объект при помощи JSON.parse(objectName), получаем все данные. Допустим, у нас есть строка размером в 500 пикселей и overflow: hidden. Мы создаём в ней объект с классом item-start:

containter {
  position: relative;
}
item-start {
  position: absolute;
  transform: translateY(-20px);
  transition: transform 5s linear;
}

и после этого добавляем к этому объекту класс item-end:

item-end {
  transform: translateY(520px);
}

Наш элемент за 5 секунд дойдёт до конца и скроется, и мы можем поставить сразу таймаут на 5с, чтобы его удалить. Делаем цикл, и каждые 500мс аппендим новый элемент, например, и они начинают вниз ползти.
Если не фиксированная высота, то придётся сложнее, но тоже можно что-нибудь придумать на чистом css.

forgetable: Можно какой-то простенький примерчик?

Александр Котов: https://codepen.io/forgetable/pen/xdqYbL

Единственная вещь - при использовании таймеров нужно добавлять события window.onblur и window.onfocus, потому что таймеры плохо работают, если вкладка неактивна. Как только окно не в фокусе, удаляем все элементы с поля, как только снова в фокусе - стартуем заново.