How to get carousel to be responsive?

Question

How to activate the plugin is responsive carousel ONLY WHEN size less than 1024px width. But if more than 1024px then inactive. Example i use

$(window).bind("load resize", function() {
    var width = $(window).width();
    if (width <= 1024) {
        $("#product-item").addClass("owl-carousel").addClass("owl-theme");
    } else {
        $("#product-item").removeClass("owl-carousel").removeClass("owl-theme");
    }
});

https://jsfiddle.net/zgnkn3hw/6/ . When I use the code above, still active. Although I've removeClass owl-owl-themed carousel-loaded owl owl-drag , but still can be shifted. because owl-item and owl-stage cant be eliminated, such as $(".product-item").removeAttr("style")

UPDATE QUESTION

How when i press button. class 1 and 2 be removed but class 3 still show

$( "button" ).click(function() {
  $(".1").remove();
  $(".2").remove();
  $(".3").still(); /* still alive */
});

<button>Button</button>
<span class="1">
        <span class="2">
            <span class="3">
            </span>
        </span>
</span>

To Be

<button>Button</button>
<span class="3">
</span>

because class 1 and 2 is owl-item and owl-stage

Answer 1

It seems that the problem of your code is not class things, but the way jsfiddle generating code.

The following code it generated by jsfiddle.

window.onload=function(){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            items: 1,
            margin: 10,
            autoHeight: true
        });
     })


    $(window).bind("load resize", function() {
        var width = $(window).width();
        console.log(width);
        if (width <= 1024) {
            $("#product-item").addClass("owl-carousel").addClass("owl-theme");
        } else {
            $("#product-item").removeClass("owl-carousel").removeClass("owl-theme");
        }
    });
}

Your "load" event listener is in a "onload" callback, so its callback can't be called at beginning. Try to resize the window yourself you may find the code actually works.

Update:

 $("button").click(function() { $(".b").unwrap(); $(".c").unwrap(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Button</button> <span class="a"> <span class="b"> <span class="c"> </span> </span> </span>