Здравствуйте. как можно решить такую задачу: чтобы при нажатии на кнопку (div class="add-food") добавлялся select елемент сначала с name="food2", потом с name="food3" и тд. Буду очень благодарен за решение.
Код (Javascript): var sel = document.createElement('select'), i = 2; document.getElementById('add-food').addEventListener('click', function() { var cloneSel = sel.cloneNode(); cloneSel.name = 'food' + (i++); document.body.appendChild(cloneSel); });
Спасибо огромное, пойду попробую добавить --- Добавлено --- Извините, но есть еще 4 вопроса: 1. Можно ли ограничить количество select-ов 2. Как спаунить их именно над кнопкой add 3. Как задать Селекту клас 4. Как рядом с каждым селектом добавлять инпут с таким же номером в класе (например, food-weight2 для 2 селекта) Еще раз спасибо
Код (Javascript): var sel = document.createElement('select'), i = 2, limit = 5 + i; document.getElementById('add-food').addEventListener('click', function() { if (i >= limit) { return false; } var cloneSel = sel.cloneNode(); cloneSel.name = 'food' + (i++); cloneSel.classList.add('some-class') this.insertAdjacentHTML('beforeBegin', cloneSel.outerHTML); });
Последняя проблема: нужно чтобы элементы добавлялись внутрь дива с класом food-container. Это возможно?
Ясный красный. Код (Javascript): // вместо this.insertAdjacentHTML('beforeBegin', cloneSel.outerHTML); // пишем document.querySelector('.food-container').appendChild(cloneSel); По ходу, всё это уже становится ближе к разделу "Сделайте за меня". Вопросы пошли простейшие, но вы как-то не спешите попробовать найти инфу самостоятельно
Не подскажите еще, пожалуйста, как реализовать удаление, например, блока с class="food2" при нажатии на блок с class="delete-food-2"?
И при этом у всех блоков цифры после food менялись так, чтобы порядок был правильным (2, 3 , 4 и тд)?