Как удалить конкретный блок по нажатию кнопки в модальном окне?

Question

У меня несколько блоков с кнопкой "Удалить". По нажатию на кнопку появляется модальное окно с подтверждением удаления. Не знаю, как правильно сделать удаление блока по нажатию кнопки подтверждения. Если указываю parentNode кнопки, то выходит ошибка "Uncaught TypeError: Cannot read property 'parentNode' of undefined". Работает только в случае, если вместо модального окна делаю подтверждение на confirm, но я не хочу его использовать, так как не нравится его вид. Подскажите, как правильно сделать удаление блока на чистом JavaScript

for (var i = 0; i < deleteBtn.length; i++) {
        deleteBtn[i].addEventListener('click', function () {
            alert.classList.remove('hidden');
        });
        noBtn.addEventListener('click', function () {
            alert.classList.add('hidden');
        });
        yesBtn.addEventListener('click', function () {
            deleteBtn[i].parentNode.remove();
        })
    }

Ссылка на JSFiddle

Answer 1

Модальные окна реализуются через переключение дополнительного класса, который отвечает за стили(часто это opacity, visiblity и для плавности - transition) и тогда никаких элементов создавать не придется. [Тут][1] вы найдете готовые примеры с кодом

  [1]: https://codepen.io/search/pens?q=modal

Answer 2

В цикле только те эл-ты, которые повторяются:

for (var i = 0; i < deleteBtn.length; i++) {
  deleteBtn[i].addEventListener('click', function(e) {
    // добавляем класс к блоку который надо удалить
    // класс по которому будет удаляться блок
    e.target.closest('.block').classList.add('selected');
    alert.classList.remove('hidden');
  });
}

Вне цикла выносим ивенты для подтверждения

noBtn.addEventListener('click', function() {
  // Нет - удаляем класс у блока, который надо удалить
  document.querySelector('.selected').classList.remove('selected');
  alert.classList.add('hidden');
});
yesBtn.addEventListener('click', function() {
  // Да - удаляем эл-т с классом, по которому происходит удаление
  document.querySelector('.selected').remove();
  alert.classList.add('hidden');
});

Так же, после удаления блока будет некорректно отображаться окно подтверждение. Как вариант, сменить стили на

.alert {
  background-color: cyan;
  width: 9rem;
  text-align: center;
  border: 3px solid blue;
  position: fixed;
  top: 10px;
  left: calc(50% - 4.5rem);
}

БЛОГ НА HUSL

Как удалить конкретный блок по нажатию кнопки в модальном окне?

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