Как удалить динамически созданный блок?

Question

[Иван Симонов]

Здравствуйте
Пытаюсь создать всплывающий блок с изображением -
Fiddle

Сейчас получаю ошибку Cannot read property 'querySelector' of null
Понимаю, что при загрузке страницы данного блока нет, и соот. получаю ошибку

Подскажите, как удалить динамически созданный блок. Т.е при клике на кнопку Close - чтобы блок закрывался (удалялся)

Answer 1

[dollar]

Не разбираясь во всех ваших хитросплетениях, давайте просто отдебажим ваш код:

1. 
   

   const modal = new Modal(document.querySelector('.modal'));

   
   Это то, что выполнится первым. В конструктор передается результат поиска элемента. Если элемент не найден, то querySelector выдаст null. Очевидно. Здесь нет проверок на null, но будем надеяться, что в теле конструктора они точно есть. Ну или хотя бы есть полная уверенность, что элемент с таким классом обязательно есть на странице.
   
2. Входим в конструктор:
   

   this.modalElement = modalElement;
   // .......
   this.modalElement.querySelector(..................);

   
   И здесь происходит ошибка. Странно, проверки на null нигде нет. И судя по тексту ошибки, вы пытаетесь вызвать метод querySelector переменной modalElement, которая имеет значение null. Следовательно, в самом начале элемента с классом modal не было на странице.
   

Comments

[Иван Симонов]

Спасибо. Понимаю, что элемента нет. Добавил проверку Fiddle. Но как тогда удалить созданный блок?

[dollar]

Так почти ничего по сути не изменилось.

1. Вы создаёте объект modal класса Modal.
   
2. Вызывается конструктор, в котором есть проверка на null и кусок внутри if просто не работает.
   
3. Кроме этого вешается обработчик this.create на первую картинку. Всё.
   

При нажатии на картинку:

1. Вызывается обработчик this.create
   
2. Создаются всякие красивости.
   
3. Создается кнопка. При этом на кнопку не вешается никакой обработчик. Она как бы пустая.
   
4. Больше ничего не происходит.
   

Собственно, точек входа в this.delete нет.

Если не секрет, то зачем вы вообще используете ООП? Оно обычно помогает справиться со сложностиями, разбить комплексную задачу на подзадачи. Но вам оно мешает. Ведь нужно понимать, в какой последовательности выполняется ассинхронный код. Что, когда, где, зачем и кого вызывает и т.д.

Иначе объясните, что по смыслу обозначает класс Modal? Чем является объект modal число логически, русским языком, то есть что это такое?

Как по мне, в императивном стиле с нормальными названиями переменных и функций было бы куда проще.

[Иван Симонов]

dollar, В данном случае, пример - в целях самообразования. Класс Modal - для создания и закрытия всплывающего окна с изображением. Вариант без ООП есть, поэтому пытаюсь сделать с использованием ООП.

[dollar]

Иван Симонов, не для чего, а что это такое? Вы же создаете класс объектов. А потом вы создаете экземпляр этого класса, то есть сам объект. Вот что это за объект? Что он из себя представляет? Я пойму, если вы скажете, что это "решалка проблемы создания и закрытия окон", но это такое себе определение, ни разу не красивое и не свойственное ООП, хотя формально будет подходить по смыслу.

В ООП объект - это обычно именно объект: окно, кнопка, вид, даже время или мысль можно представить в виде объекта. Но всегда должно быть понятно, что это. Иначе это не ООП, а изврат какой-то. Без обид.

[Иван Симонов]

dollar, Значит до ООП еще не дорос. Будем теорию читать. Спасибо за ответ.

Answer 2

[Владимир Мальков]

В фанке create сохраняйте элемент модалки в переменную (желательно приватную, например _modal), в close() обращайтесь к этой переменной и либо делайте display = 'none', либо удаляйте сам элемент.