Carousel - stopping when removing the object from the page

[David Clifton]

I'm using Bootstrap in conjunction with Backbone in a single page 
application. On my main page, I have a bootstrap carousel. When a user 
clicks a button, they are taken to 'another page' - this is done by 
removing many elements related to the first page from the DOM (including 
the carousel) and then injecting new elements (new views in backbone) into 
the page.

My issues is that when a user switches to another page, a javascript error 
is thrown (in un-minified bootstrap.js it is $next[0] is undefined, from 
line 347). Looking at that line, we are here:

      if (!$.support.transition && this.$element.hasClass('slide')) {
        this.$element.trigger('slide')
        $active.removeClass('active')
        $next.addClass('active')
        this.sliding = false
        this.$element.trigger('slid')
      } else {
        $next.addClass(type)
        $next[0].offsetWidth // force reflow  <-- the problem line
        $active.addClass(direction)
        $next.addClass(direction)
        this.$element.trigger('slide')

this is in the slide function. My guess is that this is happening because 
the javascript is running and doesn't know that the carousel has been 
completely removed from the page.

My question is - how can I properly cleanup before removing the object from 
the page so that the code is not attempting to execute slide on something 
that doesn't exist?

Many thanks for any assistance.