Skip to main content

How to Check if a Clicked Element Has a Specific Class in JavaScript

A fundamental pattern in web development is to determine what a user clicked on. When you attach a single event listener to a parent element to handle clicks on many children—a technique called event delegation—you need a reliable way to check if the clicked element (event.target) has a specific class.

This guide will teach you the two best methods for checking an element's class within an event handler. You'll learn the direct classList.contains() method and the more powerful, selector-based matches() method, both essential for creating efficient and interactive user interfaces.

The Core Concept: Event Delegation and event.target​

Instead of adding a separate click listener to every single button or list item on a page (which is inefficient), it's a best practice to add one listener to their common parent. When an event "bubbles up" from a child to the parent, the listener catches it.

The event.target property is the key: it gives you a reference to the actual element that was originally clicked.

Problem: how do we know which of the boxes was clicked if the listener is on the <body>?

<div class="box box-one">Box 1</div>
<div class="box box-two">Box 2</div>
<div class="box box-three">Box 3</div>
// One listener on a parent element
document.body.addEventListener('click', (event) => {
  // event.target is the specific div that was clicked
  console.log('You clicked on:', event.target);
});

Now, we need a way to check the class of event.target.

The Primary Method: event.target.classList.contains()​

The most direct and readable way to check if an element has a specific class is with the classList.contains() method. It returns a simple boolean: true if the class exists, and false if it does not.

Solution: this is the standard approach for simple class checks.

document.body.addEventListener('click', (event) => {
  if (event.target.classList.contains('box-one')) {
    console.log('You clicked on the first box!');
  } else {
    console.log('You did not click on the first box.');
  }
});

The Powerful Alternative: event.target.matches()​

An even more flexible method is element.matches(). This method checks if the element would be selected by a given CSS selector string. This is more powerful because it can check for more than just a single class.

Solution:

document.body.addEventListener('click', (event) => {
  // The selector must start with a dot (.) for a class
  if (event.target.matches('.box-one')) {
    console.log('The clicked element has the "box-one" class.');
  }
});

The true power of .matches() is its ability to handle more complex selectors.

// Example: Check if the clicked element is a DIV and has the 'box' class
if (event.target.matches('div.box')) {
  console.log('You clicked on a div with the "box" class!');
}

Practical Example: A Dynamic To-Do List​

Event delegation is perfect for managing lists where items are added and removed dynamically. This script attaches one click listener to the <ul> to handle clicks on the "Remove" buttons of its children.

<ul id="todo-list">
  <li>Walk the dog <button class="remove-btn">X</button></li>
  <li>Buy groceries <button class="remove-btn">X</button></li>
  <li>Write code <button class="remove-btn">X</button></li>
</ul>
const todoList = document.getElementById('todo-list');

todoList.addEventListener('click', (event) => {
  // Use .matches() to check if the clicked element is a remove button
  if (event.target.matches('button.remove-btn')) {
    // Find the parent <li> element and remove it
    const listItem = event.target.closest('li');
    if (listItem) {
      listItem.remove();
      console.log('Removed an item.');
    }
  }
});
note

This is highly efficient. Even if we add 100 more to-do items, we still only have one event listener.

Conclusion​

Checking the class of event.target is the cornerstone of the powerful event delegation pattern.

  • For a simple and direct check for a single class, use event.target.classList.contains('className').
  • For more flexible and powerful checks that can involve tag names, multiple classes, or other attributes, use event.target.matches('.selector').

Using these methods allows you to write clean, efficient, and scalable code for handling user interactions.

Table of Contents