2.4 KiB
Алгоритм решения
- Разработать структуру HTML/CSS. Позиционировать кнопку внутри сообщения.
- Найти все кнопки
- Присвоить им обработчики
- Обработчик будет ловить событие на кнопке и удалять соответствующий элемент.
Вёрстка
Исправьте HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопку лучше сделать как div, а картинка --- будет его background. Это более правильно, чем img, т.к. в данном случае картинка является оформлением кнопки, а оформление должно быть в CSS.
Расположить кнопку справа можно при помощи position: relative для pane, а для кнопки position: absolute + right/top. Так как position: absolute вынимает элемент из потока, то кнопка может перекрыть текст заголовка. Чтобы этого не произошло, можно добавить padding-right к заголовку.
Потенциальным преимуществом способа с position по сравнению с float в данном случае является возможность поместить элемент кнопки в HTML после текста, а не до него.
Обработчики
Для того, чтобы получить кнопку из контейнера, можно найти все IMG в нём и выбрать из них кнопку по className. На каждую кнопку можно повесить обработчик.
Решение
[edit src="solution"]Решение в песочнице[/edit]
Для поиска элементов span с нужным классом в нём используется getElementsByTagName с фильтрацией. К сожалению, это единственный способ, доступный в IE 6,7. Если же эти браузеры вам не нужны, то гораздо лучше -- искать элементы при помощи querySelector или getElementsByClassName.