Что делает строка ‘message.remove();’ ? Когда я проходил задания по этой теме, я использовал remove, для удаления класса, когда я удалял class ‘hidden’ у элемента и он становился видимым, но в моём случае у всех элементов class ‘message’ по середине и смысла в его удалении я не вижу, поэтому задал вопрос. Вот собственно сам код:
А с html кодом вы можете ознакомиться тут https://htmlacademy.ru/courses/303/run/23
Дело в том что я взял готовый код ибо сам не в силах выполнить и разбираюсь что к чему.
Код
var varForm = document.querySelector(’.chat-form’);
var varChat = document.querySelector(’.chat-content’);
var input = document.querySelector(’.chat-form-input’);
var varTemp = document.querySelector(’#message-template’).content;
var message = varTemp.querySelector(’.chat-message’);
var messageRemoover = function (message) {
var remButton = message.querySelector(’.chat-message-button’);
remButton.addEventListener(‘click’, function () {
message.remove();
});
};
varForm.addEventListener(‘submit’, function(evt) {
evt.preventDefault();
var newMessage = message.cloneNode(true);
var text = newMessage.querySelector(’.chat-message-text’);
var name = newMessage.querySelector(’.chat-message-name’)
var value = input.value;
text.textContent = value;
varChat.appendChild(newMessage);
messageRemoover(newMessage);
});
ну во-первых вы взяли на разбор один из худших кодов, т.к. тут нейминг переменных запутанный.
тут message повторяется дважды (хотя конфликта не возникает, т.к. это переменные разных областей видимости).
messageRemoover(newMessage)
этой функцией мы удаляем узел newMessage. соответственно он - клон div.chat-message из шаблона. вот именно клона мы и удаляем по клику на .chat-message-button
Вы сказали что тут запутан name’ing переменных. Вы имели ввиду, чтобы varForm, varChat, var Temp шли друг за другом? Или сами функции напутаны? Хотел узнать как в вашем понимании расположить грамотно данный код.
нет, названия переменных должны отражать их суть, а еще не должны повторяться локальные и глобальные переменные, как например message выступает и глобальной переменной и параметром функции (локальная область видимости).
например если в переменной мы помещаем элемент с формой, то достаточно назвать его newMessageForm, т.к. мы тут сразу понимаем что это форма для ввода новых сообщений, без глубокого анализа кода, написанного индусами выдающимися умами современности. а varForm не говорит ни о чем, приходится лезть в дебри.
а насчет порядка - в принципе правил никаких нет, но стараются их располагать в том же порядке, в котором они встречаются в DOM-иерархии.