// Блок объявления переменных
let template = document.querySelector('#message-template').content;
let messagesContainer = document.querySelector('.chat-content');
let input = document.querySelector('.chat-form-input');
let submit = document.querySelector('.chat-form');
// Добывляем прослушку на форму, чтобы создать новое сообщение при отправке формы.
submit.addEventListener('submit', (e) => {
e.preventDefault();
let clonedEl = template.cloneNode(true);
let elText = clonedEl.querySelector('.chat-message-text');
let removeBtn = clonedEl.querySelector('.chat-message-button');
elText.textContent = input.value;
messageHandler(removeBtn);
messagesContainer.appendChild(clonedEl);
input.value = '';
})
// Вешаем на кнопку удаления сообщения событие клик, ищем ближайший к нему элемент с классом "chat-message", т.е. его родителя, и удаляем родителя при клике на кнопку
let messageHandler = (removeBtn) => {
removeBtn.addEventListener('click', () => {
removeBtn.closest('.chat-message').remove();
})
}
1 лайк