Динамическое создание полей с помощью чистого JavaScript

Задачи JavaScript

Есть задача — с помощью чистого JavaScript реализовать динамическое создание полей ввода и добавление их в список. Например, это может понадобиться при составлении списка покупок/студентов или чего-то подобного.

При решении данной задачи Вам потребуются следующие знания:

  • Поиск элемента по селектору;
  • Отслеживание клика по элементу;
  • Клонирование элемента со всем содержимым;
  • Добавление и удаление классов;
  • Отслеживание клика по динамически созданному элементу;
  • Определение ближайшего элемента с указанным селектором;
  • Удаление элемента.

Решение

Для решения задачи необходимо заверстать элемент, который будет использован как образец для создания элементов списка.

Обратите внимание, что имя поля input я указываю с квадратными скобками — name[], так как полей будет больше одного, то при отсутствии квадратных скобок будет передано только значение последнего поля, а необходимо передавать значения каждого поля, поэтому ставятся квадратные скобки, говорящие что значение поля является элементом массива name.

Далее я буду брать этот код как объект и изменяя его вставлять в список.

Эти действия необходимо совершать при клике по кнопке с плюсом.

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

Под списком я понимаю не комбинацию тегов ul > li, а логически связанные между собой блоки, содержащие поля ввода.

После этого можно приступить к удалению элемента списка. Для этого потребуется отловить событие клика на кнопке, которой не существовало в момент создания страницы, которая была создана при добавлении клонированного блока в список.

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

Необходимо понять был ли клик совершен по элементу и если да, содержал ли элемент класс js-remove:

Далее необходимо определить прародительский блок, который содержит кнопку по которой был произведен клик и другие связанные элементы, фактически необходимо выяснить в каком из клонированных ранее блоков содержится кнопка по которой был произведен клик.

После того, как блок, элемент списка, определен его следует удалить. Чтобы его удалить необходимо сперва определить родительский элемент, а затем в родительском элементе удалить тот, который необходимо, указав его как дочерний.

Результат решения задачи

Добавить комментарий

Вступайте в нашу группу в VK

Через группу удобно следить за обновлениями сайта, а так же получать дополнительный интересный материал, который публикуется только в группе.

ИП Исаенко А.В.

ОГРНИП 317774600344403

ИНН 773770600180