Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия.
Результат:
Как лучше отобразить кнопку справа-сверху: position:absolute или float?
Исходный документ tutorial/browser/events/messages-src/index.html.
- Разработать структуру HTML/CSS. Позиционировать кнопку внутри сообщения.
- Найти все кнопки
- Присвоить им обработчики
- Обработчик будет сообщение по кнопке и удалять его
Исправьте HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопку лучше сделать как div, а кнопка — его background. Это более правильно, чем img, т.к. в данном случае картинка является оформлением кнопки, а оформление должно быть в CSS.
Расположить кнопку справа можно при помощи position: relative для pane, а для кнопки position: absolute + right/top. Можно добавить padding-right к заголовку, чтобы избежать перекрытия кнопки и текста (для длинных заголовков).
Потенциальном преимуществом способа с position по сравнению с float в данном случае является возможность поместить элемент кнопки после текста, а не до него.
Для того, чтобы получить кнопку из контейнера, можно найти все IMG в нём и выбрать из них кнопку по className. На каждую кнопку можно повесить обработчик.
Решение показано тут: tutorial/browser/events/messages/index.html.