Демонстрация события

by webref

HTML

<div class="notice-warning">
  <div class="notice-close">&#215;</div>
  <strong>Внимание!</strong> Я сейчас потеряю терпение.
</div>

CSS

body {
  color: #333;
  font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
strong {
  font-weight: 600;
}
.notice-warning {
  background: linear-gradient(#ffdc72, #ffbf00);
  border: 1px solid #f2b600;
  border-bottom-color: #c90;
  border-radius: 6px;
  padding: 10px 16px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.notice-close {
  background: #ffdc72;
  background: rgba(255, 255, 255, .5);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(178, 133, 0, .9), inset 0 -1px 2px rgba(255, 255, 255, .25);
  color: #b28500;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  height: 24px;
  float: right;
  text-align: center;
  transition: color .15s ease;
  width: 24px;
}
.notice-close:hover {
  color: #8c6900;
}

JavaScript

$('.notice-close').on('click', function(event){
  $('.notice-warning').remove();
});