Закрываемые элементы списка

 alexei 25/07/2021 - 09:21

Вы узнаете как закрывать элементы списка при помощи JavaScript.


Закрываемые элементы списка

Нажмите на символ "x" справа от элемента списка, чтобы закрыть/скрыть этот элемент.

  • Анна
  • Алексей×
  • Борис×
  • Жанна×
  • Иван×
  • Сергей×
  • Светлана

Как сделать закрываемые элементы списка

Шаг 1) Добавляем HTML:


<ul>
  <li>Анна</li>
  <li>Алексей<span class="close">x</span></li>
  <li>Борис<span class="close">x</span></li>
  <li>Жанна<span class="close">x</span></li>
  <li>Иван<span class="close">x</span></li>
  <li>Сергей<span class="close">x</span></li>
  <li>Светлана</li>
</ul>

Шаг 2) Добавляем CSS:


* {
  box-sizing: border-box;
}

/* Стиль списка (убираем отступы и маркеры) */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Стили элементов списка */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Убираем двойные границы */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}

/* Добавляем светло-серый фон при наведении на элемент */
ul li:hover {
  background-color: #eee;
}

/* Стили закрывающей кнопки */
.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

.close:hover {
  background: #bbb;
}

Шаг 3) Добавляем JavaScript:


// Получаем все элементы с классом "close" */
var closebtns = document.getElementsByClassName("close");
var i;

// Проходим по найденным элементам и устанавливаем обработчик события.
// Когда на элемент кликают мышкой, родительский элемент скрывается
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}