July 17th, 2021

JavaScript: кнопки удаления сообщений

Решил задачу «Добавить кнопку закрытия» к подразделу 2.1 «Введение в браузерные события» второй части учебника по JavaScript.

Задача несложная, но достаточно интересная.

Дана HTML-страница (ее код можно посмотреть в песочнице), на которой есть список сообщений, каждое из которых представляет собой HTML-элемент div с CSS-классом pane.

HTML-страница с тремя тестовыми сообщениями у меня в браузере выглядит так (картинка):



Тонкая серая линия слева, сверху и справа — это граница окна браузера, чтобы можно было понять, где относительно области просмотра браузера находится содержимое заданной HTML-страницы.

Стили для заданной HTML-страницы определены в отдельном файле messages.css:
body {
  margin: 10px auto;
  width: 470px;
}

h3 {
  margin: 0;
  padding-bottom: .3em;
  font-size: 1.1em;
}

p {
  margin: 0;
  padding: 0 0 .5em;
}

.pane {
  background: #edf5e1;
  padding: 10px 20px 10px;
  border-top: solid 2px #c4df9b;
}

.remove-button {
  font-size: 110%;
  color: darkred;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
}

В задаче требуется написать скрипт на языке JavaScript, который добавит в правый верхний угол каждого сообщения кнопку, с помощью которой пользователь сможет удалить выбранное сообщение с заданной HTML-страницы.

Решение я набросал довольно быстро:
let panes = document.getElementsByClassName("pane");
for (let pane of panes) {
    let xButton = document.createElement("button"); // создаём кнопку
    xButton.className = "remove-button";
    xButton.innerHTML = "[x]";
    
    pane.style.position = "relative";               // позиционируем кнопку
    xButton.style.position = "absolute";            // относительно сообщения
    xButton.style.top = "0";
    
    xButton.onclick = () => pane.remove();          // функционал кнопки
    
    pane.append(xButton);                           // вставляем кнопку в сообщение
}

Это решение принципиально такое же, как и решение от авторов этой задачи. Только авторы задачи в своем решении используют несколько другие способы. Например, создание и вставку кнопок они выполняют с помощью вставки строки в код заданной HTML-страницы, воспользовавшись методом insertAdjacentHTML. А изменение стилей HTML-элементов они сделали не программно, как я, а просто изменив исходные CSS-классы в файле messages.css. Я же решил исходный код стилей не трогать, а сделать всё из скрипта.

Данная задача хороша тем, что для ее решения нужно объединить знания, полученные минимум из четырех подразделов, изученных не так давно:

1) Для поиска и перебора нужных HTML-элементов с заданной HTML-страницы используем знания, полученные из подраздела 1.4 «Поиск: getElement*, querySelector*» второй части обсуждаемого учебника;

2) Для создания нового HTML-элемента, заполнения его свойств и содержимого, а также вставки этого HTML-элемента на заданную HTML-страницу используем знания из подраздела 1.7 «Изменение документа» второй части обсуждаемого учебника;

3) Для позиционирования HTML-элементов на заданной HTML-странице используем знания из подраздела 1.11 «Координаты» второй части обсуждаемого учебника;

4) Для придания кнопке функционала используем знания текущего подраздела 2.1 «Введение в браузерные события» второй части обсуждаемого учебника.

Вот так у меня в браузере выглядит результат работы скрипта для заданной тестовой HTML-страницы (картинка):



На этой картинке одно из трех изначальных сообщений уже было удалено пользователем. На HTML-странице осталось только два сообщения. Можно видеть добавленные скриптом к сообщениям кнопки [x].