jQuery addClass example

Change class name on click in jQuery

by Naresh

HTML

<div class="chat-history">
  <div class="message">
    <p>Sent Message 1</p>
    <button>Delete</button>
  </div>
  <div class="message">
    <p>Sent Message 2</p>
    <button>Delete</button>
  </div>
  <div class="message">
    <p>Sent Message 3</p>
    <button>Delete</button>
  </div>
  <div class="message">
    <p>Received Message 1</p>
    <button>Delete</button>
  </div>
  <div class="message">
    <p>Received Message 2</p>
    <button>Delete</button>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  background: #fff;
}
* {
  margin: 0;
  padding: 0;
}
.message {
  display: flex;
}
.message p {
  margin-right: 1rem;
}

JavaScript

$('.message').on('click', function(e) {
	$(this).css('display', 'none');
});