Просмотр полной версии : Удалять появившиеся блоки при нажатии
yaparoff
07.11.2018, 15:02
При нажатии на кнопку появляются блоки. У каждого такого блока есть кнопка есть крестик. При нажатии на него должен удалятся этот блок.
Но дело в том что при инициализации страницы этих крестиков нет и js не видит их.
Поэтому просто объявить их вот так, и потом работать с ними не получается
const removeBtns = document.querySelectorAll('.block__close');
Получается при создании каждого нового блока нужно добавлять его крестик в какую то коллекцию? Или как?
Как это сделать?
https://codepen.io/anon/pen/VVvqdZ
https://learn.javascript.ru/event-delegation
yaparoff
07.11.2018, 15:19
Nexus,
Не совсем понимаю к чему это
У меня проблема в другом:
Если я объявляю крестики таким образом
const removeBtns = document.querySelectorAll('.block__close');
то Js их не видит
SuperZen
07.11.2018, 15:27
[...removeBtns].map(btn => ...
до добавления блока в removeBtns пусто, поэтому слушатель не установился, надо после добавления блока устанавливать слушатель...
Nexus,
Не совсем понимаю к чему это
К решению проблемы.
https://codepen.io/anon/pen/qQbWOB?editors=0010
Dilettante_Pro
07.11.2018, 15:38
Делегирование очень даже при чем
Сначала button class="block__close" отсутствуют.
<div id="container"></div>
<script>
var cont = document.querySelector("#container");
cont.onclick = function(e) {
if(e.target.classList.contains("block__close")) { alert("block__close"); }
}
var btn = document.createElement("button");
btn.classList.add("block__close");
btn.innerText = "X";
cont.appendChild(btn);
</script>
yaparoff
07.11.2018, 15:58
Nexus,
Да, точно. Спасибо!
Еще такой момент когда удаляются все блоки, должно срабатывать событие. как это сделать?
Получается нужно как то проверять количество блоков
yaparoff, после удаления проверить их кол-во и ...
https://codepen.io/anon/pen/qQbWOB?editors=0010
yaparoff
08.11.2018, 09:09
Nexus,
Благодарю
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot