Размесить на экране 9 блоков div. По клику на каждый блок он должен исчезать

Question

Не могу сделать чтобы по клику на div удалялся именно этот div на который нажал. Оно начинает удалять с последнего блока div и по порядку до самого верха а не тот блок на который нажимаешь. У меня не работает может есть другой способ а и кстати крестик желательно убрать просто сделать клик по блоку

    let child = document.querySelectorAll(".div");

for (let div of child) {
  div.insertAdjacentHTML(
    "afterbegin",
    '<button class="remove-div">[x]</button>'
  );
  div.onclick = () => div.remove();
}

Answer 1

Ты должен использовать делегирование событий. Для этого ты сначала должен добавить класс каждому div элементу с разными названиями. Про делегирование можешь прочитать тут https://learn.javascript.ru/event-delegation

Answer 2

Если делегирование для вас сложно в понимании, то ~~лучше разобраться~~ можете по event'у кликнутого элемента (event.target), получать его родителя (.parentElement) и удалять его (.remove()).
К слову, это почти точно так же, как и при делегирование..

let child = document.querySelectorAll("div");

for (let div of child) {
  div.insertAdjacentHTML(
    "afterbegin",
    '<button class="remove-div">[x]</button>'
  );
  div.onclick = (event) => event.target.parentElement.remove();
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

Вот вариант с делегированием:

let removeBlock = document.querySelector('.remove');
let removeBlockItems = removeBlock.children;

for (let div of removeBlockItems) {
  div.insertAdjacentHTML('afterbegin', '<button class="remove-div">[x]</button>');
}

removeBlock.addEventListener('click', event => {
  if(event.target.classList.contains('remove-div')) {
    event.target.parentElement.remove();
  }
});

<div class="remove">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

БЛОГ НА HUSL

Размесить на экране 9 блоков div. По клику на каждый блок он должен исчезать

Ответы (2 шт):