0

У меня несколько блоков с кнопкой "Удалить". По нажатию на кнопку появляется модальное окно с подтверждением удаления. Не знаю, как правильно сделать удаление блока по нажатию кнопки подтверждения. Если указываю 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

2 ответа 2

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);
}
0

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

  [1]: https://codepen.io/search/pens?q=modal
5
  • Ну так у меня и переключается класс "hidden" с "display: none".
    – IcEWaRRiOr
    Commented 18 мая 2021 в 13:21
  • для чего удалять его через js, если уже скрыли его визуально? Commented 18 мая 2021 в 13:24
  • 1
    я хочу удалить блок с кнопкой, а не модальное окно @yourBadApple
    – IcEWaRRiOr
    Commented 18 мая 2021 в 13:25
  • добавьте скрипт, который при нажатии добавляет класс, который скрывает ваш блок с кнопками Commented 18 мая 2021 в 13:26
  • я не хочу просто спрятать блок. Я хочу удалить его полность. через .remove() @yourBadApple
    – IcEWaRRiOr
    Commented 18 мая 2021 в 13:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.