How to remove scroll event after functions have finished

I am attaching a scroll event listener to a wrapper div, and then for each div with the class of "js-chart" it will check to see if that particular js-chart is within view and will execute a function on it. It will then remove the js-chart class from that element so that it won't keep on firing the function.

This all works fine, but what I'd like to do is that when all of the js-charts have been triggered (and thus there are no more elements with js-chart, to completely remove the scroll event listener so I'm not firing off pointless checks all the time.

$('#wrapper').scroll(function() {

        var $wrapper = $(this);

        $('.js-chart').each( function (n) {

            var $this = $(this);

            if ( $this.position().top + $this.height() > 100 && $this.position().top < $wrapper.height() ) {
                console.log("Test");
                createChart($this);
                $this.removeClass('js-chart');

            }
        });

    });