title: How to toggle elements in and out of DOM using jQuery detach() method?
body: <p>I have a group of divs arranged in a grid.</p>
  
  <p><a href="https://i.stack.imgur.com/KKTZP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KKTZP.png" alt="enter image description here"></a></p>
  
  <p>To style each div I'm selecting them with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" rel="nofollow noreferrer"><code>nth-child()</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="nofollow noreferrer">pseudo-class</a>.</p>
  
  <pre><code>div.tile:nth-child(4n-7) .text { background-color: yellow; }
  </code></pre>
  
  <p>A user can hide divs by clicking on a button (which fires a jQuery function that adds a <code>display: none</code> rule to the <code>class</code> attribute in the selected div).</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.hide-divs').click(function () {
       $('.dolphin').toggleClass('hidden');
      })
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.hidden { display: none; }
  </code></pre>
  
  <p><em>Here's the problem:</em></p>
  
  <p>Even though <code>display: none</code> removes the div from the screen, it doesn't remove the div from the DOM, so the <code>nth-child</code> selector still counts it when applying styles, which in turn messes up the visual design of the grid.</p>
  
  <p><a href="https://i.stack.imgur.com/IsXPs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IsXPs.png" alt="enter image description here"></a></p>
  
  <p><em>The above layout is broken because only the first column should be yellow.</em></p>
  
  <p>So my first thought was to use the jQuery <a href="https://api.jquery.com/remove/" rel="nofollow noreferrer"><code>remove()</code> method</a>, which takes elements (and its descendants) out of the DOM.</p>
  
  <p>Turns out, however, once <code>remove()</code> is applied you can't get those divs back. They're gone. So the toggle function breaks.</p>
  
  <p>After a bit of research I discovered the jQuery <a href="https://api.jquery.com/detach/" rel="nofollow noreferrer"><code>detach()</code> method</a>, which does the same thing as <code>.remove()</code>, except it stores the removed elements' data for later use. </p>
  
  <p>From the <a href="https://api.jquery.com/detach/" rel="nofollow noreferrer">jQuery website</a>:</p>
  
  <blockquote>
    <p>The <code>.detach()</code> method is the same as <code>.remove()</code>, except that
    <code>.detach()</code> keeps all jQuery data associated with the removed
    elements. This method is useful when removed elements are to be
    reinserted into the DOM at a later time.</p>
  </blockquote>
  
  <p>Everything looks good for <code>detach()</code> to work with the toggle switch, except my efforts to implement it aren't working.</p>
  
  <p>I've used the <a href="https://api.jquery.com/detach/" rel="nofollow noreferrer">example on the jQuery website</a> as a guide but it doesn't work on the grid. I also read various related posts on this site, but to no avail. I must be missing something.</p>
  
  <p>Any feedback would be much appreciated.</p>
  
  <p><a href="http://jsfiddle.net/tfyfpbb2/" rel="nofollow noreferrer">http://jsfiddle.net/tfyfpbb2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.hide-divs').click(function() {
    $('.dolphin').toggleClass('hidden');
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    padding: 0;
    margin: 0;
  }
  .text {
    height: 50px;
    width: 100px;
    margin: 10px;
    padding-top: 15px;
    background: tomato;
    color: #fff;
    text-align: center;
    font-size: 2em;
  }
  .tile:nth-child(4n-7) .text {
    border: 2px solid #ccc;
    background-color: yellow;
    color: #000;
  }
  button {
    padding: 10px;
    background-color: lightblue;
    position: relative;
    left: 200px;
  }
  .hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;01&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;02&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text dolphin"&gt;03&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;04&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;05&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text dolphin"&gt;06&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;07&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text dolphin"&gt;08&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;09&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;10&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;11&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tile"&gt;
        &lt;div class="text"&gt;12&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;&lt;!-- end .row --&gt;
  
    &lt;button type="button" class="hide-divs"&gt;HIDE DIVS 3, 6 &amp;amp; 8&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>