title: Owl carousel's .destroy() removes unrelated divs
body: <p>I want to switch between a carousel view and a different layout depending on the width of the viewport. Setting up the carousel works fine. I run into problems when I want to remove it. </p>
  
  <p>I use <code>$owlTeam.destroy();</code> which according to the documentation should recreate the state of the markup before the carousel was initialized, but for some reason removes two unexpected and crucial divs. One is a wrapper div that is a parent of the div containing the carousel the other is the carousel div itself.</p>
  
  <p>This is my markup:</p>
  
  <pre><code>&lt;section id="some-id" class="team"&gt;
    &lt;div class="wrapper"&gt; &lt;!-- this gets removed on destroy --&gt;
      &lt;header&gt;&lt;!-- content --&gt;&lt;/header&gt;
      &lt;div class="owlCarousel"&gt; &lt;!-- and this gets removed on destroy --&gt;
        &lt;article class="big"&gt;&lt;!-- content contains another .wrapper --&gt;&lt;/article&gt;
        &lt;article class="big"&gt;&lt;!-- content contains another .wrapper --&gt;&lt;/article&gt;
        &lt;article class="small"&gt;&lt;!-- content --&gt;&lt;/article&gt;
        &lt;article class="small"&gt;&lt;!-- content --&gt;&lt;/article&gt;
        &lt;!-- and some more articles --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>This is the JS I use:</p>
  
  <pre><code>var $owlTeam;
  if( $window.width() &lt; 680 ) {
      $('.team .owlCarousel').owlCarousel({
          autoPlay: false
          , singleItem:true
          , transitionStyle : "fade"
          , pagination : true
      });
      $owlTeam = $('.team .owlCarousel').data('owlCarousel');
  }
  
  $window.resize(function() {
      if( $window.width() &lt; 680 ) {
          $('.team .owlCarousel').owlCarousel({
              autoPlay: false
              , singleItem:true
              , transitionStyle : "fade"
              , pagination : true
          });
          $owlTeam = $('.team .owlCarousel').data('owlCarousel');
      } else {
          if( typeof $owlTeam != 'undefined' ) {
              $owlTeam.destroy();
          }
      }
  });
  </code></pre>
  
  <p>I tried using an ID to directly select the div that's supposed to contain the carousel but this didn't change the behaviour at all. I could reinsert the missing markup with JS but that seems to be more of a bandaid than a proper solution.</p>
  
  <p>What is causing this behaviour and how can I fix it?</p>
  
  <p>jQuery Version: 1.11.1
  owl Version: 1.3.2
  Browsers I tested: FF 35, Chrome 40</p>