How can add and remove the class of the element using jquery

Question

I have created a carousel for which I have included a play/pause button. I am using bootstrap and have added the following code.

<button class="btn btn-danger btn-small" id="carousel-button">
                        <span class="fa fa-pause"></span>
                    </button>

Jquery:

$(document).ready(function() {
            $("#carousel-button").click(function() {
                if ($("#carousel-button").children("span").hasClass('fa-pause')) {
                    $("#mycarousel").carousel('pause');
                    $("#carousel-button").children("span").removeClass('fa-pause');
                    $("#carousel-button").children("span").addClass('fa-play');
                } else if ($("#carousel-button").children("span").hasClass('fa-play')) {
                    $("#mycarousel").carousel('cycle');
                    $("#carousel-button").children("span").removeClass('fa-play');
                    $("#carousel-button").children("span").addClass('fa-pause');
                }
            });
        });

I do not understand where it is getting wrong and why the button won't change after clicked.

Do you have any errors in your console? – Heretic Monkey Jun 09 '20 at 13:52 — Heretic Monkey, Jun 09 '20 at 13:52

Mamun · Accepted Answer · 2020-06-09T13:44:33.733

You probably didn't add all the references required or the order of referenced libraries are not right:

$(document).ready(function() {
  $("#carousel-button").click(function() {
    if ($("#carousel-button").children("span").hasClass('fa-pause')) {
        $("#mycarousel").carousel('pause');
        $("#carousel-button").children("span").removeClass('fa-pause');
        $("#carousel-button").children("span").addClass('fa-play');
    } else if ($("#carousel-button").children("span").hasClass('fa-play')) {
        $("#mycarousel").carousel('cycle');
        $("#carousel-button").children("span").removeClass('fa-play');
        $("#carousel-button").children("span").addClass('fa-pause');
    }
  });
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button class="btn btn-danger btn-small" id="carousel-button">
    <span class="fa fa-pause"></span>
</button>

Thanks for this! I had a typo in the references. Apologies for such a silly mistake. — Abhishek Ghadge, Jun 09 '20 at 14:32

How can add and remove the class of the element using jquery

1 Answers1