Почему parentElement равен null?

Question

[molokhan]

Добрый день!
Есть следующая задача: внутри списка находится произвольное кол-во input обернутых в span. Нужно, чтобы при фокусе любого input рядом с ним появлялось поле ввода доп.символов, оно у меня представлено как еще один span (пусть будет span class='extra'). При фокусе другого input, поле ввода из предыдущего нужно скрыть.
Вот CodePen: https://codepen.io/anon/pen/OdLNMw
Пытаюсь реализовать это таким способом. После выбора любого input, с помощью parentElement выбирается его родитель (обертка span), в который с помощью innerHTML добавляется нужный span class='extra'. После записываю ссылку на этот input в переменную previousInput и при новом срабатывании скрипта так же с помощью parentElement хочу получить обертку и удалить ненужный HTML. Но в этот раз parentElement возвращает null по сути на тот же input. В чем проблема?

Answer 1

[Дмитрий Добрышин]

После того, как вы что-либо записываете в innerHTML, объекты пересоздаются заново, а старые уничтожаются. Этот подход не самый хороший. Лучше сразу создайте все span элементы и управляйте их видимостью через классы/стили.

Answer 2

[BB 8]

Это всё innerHTML виноват