Вернуться к уроку

Спрятать сообщение

важность: 5

Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.

Результат:

P.S. Как лучше отобразить кнопку справа-сверху: через position:absolute или float:right? Почему?

Открыть песочницу для задачи.

  1. Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка – это тег <button>, поэтому понадобится несколько стилей.

    Расположить кнопку справа можно при помощи position:relative для pane, а для кнопки position:absolute + right/top. Так как position:absolute вынимает элемент из потока, то кнопка может частично оказаться «сверху» текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить padding-right к заголовку.

    Если использовать float:right, то кнопка никогда не перекроет текст. Это, пожалуй хорошо.

    С другой стороны, потенциальным преимуществом способа с position по сравнению с float в данном случае является возможность поместить элемент кнопки в HTML после текста, а не до него.

  2. Для того, чтобы получить кнопку из контейнера, используем querySelectorAll. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через parentNode.

Открыть решение в песочнице.