In this article, We will learn how to add or remove class using data attributes in jquery after a click on the button.

Please follow these steps:

  1. set data attribute name and value to the button. we used data-id=”test1″.
    Like this:

    <a class="add_button button" data-id="test1" href="#">Add Class</a>
    <a class="remove_button button" data-id="test1" href="#">Remove Class</a>
  2. set that data attribute value as a class name to the element where you want to add or remove class.
    Like this:

    <div class="test1"></div>
    <p class="test1"></p>
  3. Now first we have to get data attribute value “test1” and store in variable “id” and use it as a class selector.
    Like this:

    var id = $(this).data("id");
  4. Then adding and removing class “active” using addClass and removeClass function of jquery.
    Like this:

    $("." + id).addClass("active");
    $("." + id).removeClass("active");

Here is a full example:
HTML:

<a class="add_button button" data-id="test1" href="#">Add Class</a>
<a class="remove_button button" data-id="test1" href="#">Remove Class</a>

<div class="test1"></div>
<p class="test1"></p>

<a class="add_button button" data-id="test2" href="#">Add Class</a>
<a class="remove_button button" data-id="test2" href="#">Remove Class</a>

<div class="test2"></div>
<p class="test2"></p>

<a class="add_button button" data-id="test3" href="#">Add Class</a>
<a class="remove_button button" data-id="test3" href="#">Remove Class</a>

<div class="test3"></div>
<p class="test3"></p>

JQUERY:

$(".add_button").click(function( event ){
    event.preventDefault();
    var id = $(this).data("id");
    $("." + id).addClass("active");
});
$(".remove_button").click(function( event ){
    event.preventDefault();
    var id = $(this).data("id");
    $("." + id).removeClass("active");
});

Output:

Footer Logo

Subscribe

Select Categories