how to remove bootstrap carousel

Question

I am trying to remove bootstrap carousel on a button click and displaying all the lists in carousel

this is how it look before:

after i executed this code:

  $('#carousel-on-22').removeAttr('data-ride');
    $('#carousel-on-22').children().removeAttr('role');
    $('#carousel-on-22').children().removeAttr('class');
    $('#carousel-on-22').removeAttr('class');
    $('#carousel-on-22').children().children().each(function () {
        $(this).removeClass('carousel-item');
        $(this).removeClass('active');
    });

this is how it look after;

all events of bootstrap carousel events are still associated with it. How to remove all these events?

Answer 1

You can remove event click or any other associated event to this element like so:

$("#carousel-on-22").unbind(); //Remove all events
$("#carousel-on-22").unbind('click'); //Remove `click` event only