jQuery removeClass on iFrame button click

Question

I wrote some code to addClass to elements to open an iFrame imported by Shopify on WordPress and it works. But now, I want to close the iFrame by removing the class on my website element. I've tried a lot of things but it dosen't work

Here is my code :

jQuery(document).ready(function( $ ) {
    $(document).ready(function() {
        $('.cart-button').click(function() {
            $('.shopify-buy-cart-wrapper').addClass('is-active is-visible');
            $('.shopify-buy-cart-wrapper iframe').addClass('is-block');
            return false;
        });
        //$("iframe").contents().find("button .shopify-buy__btn--close").click(function(){
        $('.shopify-buy__btn--close').click(function() {
            $('.shopify-buy-cart-wrapper').removeClass('is-active is-visible');
            $('.shopify-buy-cart-wrapper iframe').removeClass('is-block');
        }); 
    });
});

Open cart is working, but now I want to close the cart

Answer 1

If you want to remove multiple classes with jQuery removeClass() you have to pass them as an array, not as a string.

Also, any event listener should be attached only after the element has been inserted in the DOM. If you define the event listener but the element is created afterwards, it won't work.