Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Удалять появившиеся блоки при нажатии (https://javascript.ru/forum/misc/75798-udalyat-poyavivshiesya-bloki-pri-nazhatii.html)

yaparoff 07.11.2018 15:02

Удалять появившиеся блоки при нажатии
 
При нажатии на кнопку появляются блоки. У каждого такого блока есть кнопка есть крестик. При нажатии на него должен удалятся этот блок.
Но дело в том что при инициализации страницы этих крестиков нет и js не видит их.
Поэтому просто объявить их вот так, и потом работать с ними не получается
const removeBtns = document.querySelectorAll('.block__close');

Получается при создании каждого нового блока нужно добавлять его крестик в какую то коллекцию? Или как?
Как это сделать?

https://codepen.io/anon/pen/VVvqdZ

Nexus 07.11.2018 15:08

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 07.11.2018 15:28

Цитата:

Сообщение от yaparoff
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,
Да, точно. Спасибо!
Еще такой момент когда удаляются все блоки, должно срабатывать событие. как это сделать?
Получается нужно как то проверять количество блоков

Nexus 07.11.2018 16:02

yaparoff, после удаления проверить их кол-во и ...
https://codepen.io/anon/pen/qQbWOB?editors=0010

yaparoff 08.11.2018 09:09

Nexus,
Благодарю


Часовой пояс GMT +3, время: 16:24.