Здравствуйте, что вы имеете ввиду под “берется”, это стандартный слушатель, туда можно и обычную функцию написать, все будет работать. Выложите код с html+css+js на codepen, укажите комментарием, где конкретно не работает - посмотрю.
// Контейнер для карточек
let chatContent = document.querySelector(’.chat-content’);
// Получаем шаблон карточки
let taskMessage = document.querySelector(’#message-template’).content;
let newItemTemplate = taskMessage.querySelector(’.chat-message’);
//Поле ввода
let chatForm = document.querySelector(’.chat-form’);
let newItemTitle = chatForm.querySelector(’.chat-form-input’);
//Получаем сообщение из поля ввода
chatForm.addEventListener(‘submit’, function (evt) {
evt.preventDefault();
let taskText = newItemTitle.value;
let clonedElement = newItemTemplate.cloneNode(true);
let taskDescription = clonedElement.querySelector(‘p’);
taskDescription.textContent = taskText;
chatContent.appendChild(clonedElement);
newItemTitle.value = ‘’;
let deleteMessage = clonedElement.querySelector(".chat-message-button"); // Кнопка закрыть
deleteMessage.addEventListener('click', function () {
clonedElement.remove();
});
});
Кто подскажет, почему не работает удаление?
Пишет ошибку TypeError: deleteMessageButton is null
var chat = document.querySelector('.chat-content');
var items = chat.children;
var newMessageForm = document.querySelector('.chat-form');
var newItemTitle = newMessageForm.querySelector('.chat-form-input');
var messageTemplate = document.querySelector("#message-template").content;
var newItemTemplate = messageTemplate.querySelector('.chat-message');
newMessageForm.addEventListener('submit', function (evt) {
evt.preventDefault();
var messageText = newItemTitle.value;
var message = messageTemplate.cloneNode(true);
var messageContent = message.querySelector('.chat-message-text');
messageContent.textContent = messageText;
chat.appendChild(message);
deleteMessageHandler(message);
newItemTitle.value = '';
});
var deleteMessageHandler = function (item) {
var deleteMessageButton = item.querySelector('.chat-message-button');
deleteMessageButton.addEventListener('click', function () {
item.remove();
});
};
for (var i = 0; i < items.length; i++) {
deleteMessageHandler(items[i]);
};
var list = document.querySelector('.chat-content');
var items = list.childer;
var messageTemplate = document.querySelector('#message-template').content;
var newMessage = messageTemplate.querySelector('.chat-message');
var input = document.querySelector('.chat-form-input')
var form = document.querySelector('.chat-form');
//Функция для удаления
var deleteHandler = function (item) {
var deleteMessage = item.querySelector('.chat-message-button');
deleteMessage.addEventListener('click', function () {
item.remove();
});
};
// Добавление сообщения
form.addEventListener('submit', function(evt) {
evt.preventDefault();
var youText = input.value;
var youTemplate = newMessage.cloneNode(true);
var youMessage = youTemplate.querySelector('p');
youMessage.textContent = youText;
deleteHandler(youTemplate);
list.appendChild(youTemplate);
input.value = '';
});
let chat = document.querySelector('.chat-content');
let chatForm = document.querySelector('.chat-form');
let chatFormInput = chatForm.querySelector('.chat-form-input');
let template = document
.querySelector('#message-template')
.content.querySelector('.chat-message');
chatForm.addEventListener('submit', (evt) => {
evt.preventDefault();
let textMessage = chatFormInput.value;
let newMessage = template.cloneNode(true);
let textDescription = newMessage.querySelector('.chat-message-text');
textDescription.textContent = textMessage;
chat.appendChild(newMessage);
chatFormInput.value = '';
chatMessageDelete(newMessage);
})
function chatMessageDelete (item) {
let closeButton = item.querySelector('.chat-message-button');
closeButton.addEventListener('click', function () {
item.remove();
});
}
Функцию ( Function Expression) выше прослушивателя подними, иначе прослушиватель её не видит.
Ниже можно объявлять только (Function Declaration)
в твоём варианте
function deleteMessageHandler (item) {
}
Ещё один вариант, мне кажется годным:
const chat = document.querySelector('.chat-content');
const chatForm = document.querySelector('.chat-form');
const chatFormInput = chatForm.querySelector('.chat-form-input');
const messageTemplate = document
.querySelector('#message-template')
.content.querySelector('.chat-message');
const generateMessageFromTemplate = (template, text) => {
const message = template.cloneNode(true);
const messageText = message.querySelector('.chat-message-text');
messageText.textContent = text;
message
.querySelector('.chat-message-button')
.addEventListener('click', () => message.remove());
return message;
};
chatForm.addEventListener('submit', (event) => {
event.preventDefault();
const newMessage = generateMessageFromTemplate(
messageTemplate,
chatFormInput.value
);
chat.appendChild(newMessage);
chatFormInput.value = '';
});
Получился такой дефолт
var chatContent = document.querySelector(’.chat-content’);
var chatForm = document.querySelector(’.chat-form’);
var chatFormInput = chatForm.querySelector(’.chat-form-input’);
var messageTemplate = document.querySelector(’#message-template’).content;
var chatMessage = messageTemplate.querySelector(’.chat-message’);
var addClickHandler = function(chatItem){
var buttonDeleteMessage = chatItem.querySelector(’.chat-message-button’);
buttonDeleteMessage.addEventListener(‘click’, function(){
chatItem.remove();
});
}
chatForm.addEventListener(‘submit’, function(event){
event.preventDefault();
var formInputValue = chatFormInput.value;
var message = chatMessage.cloneNode(true);
var messageText = message.querySelector(’.chat-message-text’);
messageText.textContent = formInputValue;
addClickHandler(message);
chatContent.appendChild(message);
chatFormInput.value = ‘’;
});
1 лайк
Вот мое
var messageTemplate = document.querySelector('#message-template');
var chatContent = document.querySelector('.chat-content');
var chatForm = document.querySelector('.chat-form');
var chatFormInput = document.querySelector('.chat-form-input');
chatForm.addEventListener('submit', function(evt) {
evt.preventDefault();
var messageText = chatFormInput.value.trim();
if (messageText) {
var messageElement = messageTemplate.content.cloneNode(true);
var messageTextElement = messageElement.querySelector('.chat-message-text');
messageTextElement.textContent = messageText;
chatContent.appendChild(messageElement);
chatFormInput.value = '';
}
});
chatContent.addEventListener('mouseover', function(evt) {
if (evt.target.classList.contains('chat-message')) {
var deleteButton = evt.target.querySelector('.chat-message-button');
deleteButton.style.display = 'block';
}
});
chatContent.addEventListener('mouseout', function(evt) {
if (evt.target.classList.contains('chat-message')) {
var deleteButton = evt.target.querySelector('.chat-message-button');
deleteButton.style.display = 'none';
}
});
chatContent.addEventListener('click', function(evt) {
if (evt.target.classList.contains('chat-message-button')) {
var message = evt.target.closest('.chat-message');
if (message) {
message.remove();
}
}
});
let chatContent = document.querySelector('.chat-content');
let newMsgForm = document.querySelector('.chat-form');
let newMsgInput = document.querySelector('.chat-form-input');
let msgTemplate = document.querySelector('#message-template').content;
let newMsgTemplate = msgTemplate.querySelector('.chat-message');
let delMsgeHandler = function(item) {
let closeButton = item.querySelector('.chat-message-button');
closeButton.addEventListener('click', function() {
item.remove();
});
}
newMsgForm.addEventListener('submit', function(evt){
evt.preventDefault();
let msgText = newMsgInput.value;
let msg = newMsgTemplate.cloneNode(true);
msg.querySelector('.chat-message-text').textContent = msgText;
chatContent.appendChild(msg);
newMsgInput.value = '';
delMsgeHandler(msg);
});
Моё решение. Прохождение 100%.
var messageList = document.querySelector('.chat-content'); // Cписок сообщений
var messageItems = messageList.children; // Все сообщения
var newChatForm = document.querySelector('.chat-form'); // Форма для отправки
var newMessageTitle = newChatForm.querySelector('.chat-form-input'); // Введенный текст
var messageTemplate = document.querySelector('#message-template').content; // Шаблон для сообщения
var newMessageTemplate = messageTemplate.querySelector('.chat-message'); // Новое сообщение по шаблону
newChatForm.addEventListener('submit', function(evt) { // Функция отправки формы
evt.preventDefault(); // Отменяем отправку формы по умолчанию
var messageText = newMessageTitle.value; // Введённый текст добавляем в сообщение
var message = newMessageTemplate.cloneNode(true); // Копируем шаблон
var messageChat = message.querySelector('p');
messageChat.textContent = messageText;
deleteMessageHandler(message);
messageList.appendChild(message);
newMessageTitle.value = '';
});
var deleteMessageHandler = function (messageItem) {
var deleteCheckbox = messageItem.querySelector('.chat-message-button'); // Нашли кнопку удаления
deleteCheckbox.addEventListener('click', function() { // Следим за изменением
messageItem.remove(); // Удаляем сообщение
});
};
for (var i = 0; i < messageItems.length; i++) {
deleteMessageHandler (messageItems[i]);
};
1 лайк
let list = document.querySelector('.chat-content');
let template = document.querySelector('#message-template').content;
let messageTemplate = template.querySelector('.chat-message');
let sendForm = document.querySelector('.chat-form');
let sendInput = sendForm.querySelector('.chat-form-input');
sendForm.addEventListener('submit', function(evt) {
evt.preventDefault();
let newMessage = messageTemplate.cloneNode(true);
let newMessageText = newMessage.querySelector('p');
newMessageText.textContent = sendInput.value;
list.appendChild(newMessage);
deleteMessage(newMessage);
sendInput.value = '';
});
let deleteMessage = function(item) {
let deleteButton = item.querySelector('.chat-message-button');
deleteButton.addEventListener('click', function() {
item.remove();
});
}