Having trouble with jquery detach reshowing div content

Question

I am having a hard time wrapping my head around jquery detach, well, the detach part is ok, it's getting the content to come back I am having an issue with. Basically, I have divs that display based on selections from a checkbox, and they are alternating styles based on nth row, so the primary issue was that when a row was hidden it was technically still there so the styles weren't alternating correctly. I found jquery detach searching for a solution to my nth row issue and it seems like the right direction, but I am new to it and having trouble. Here is the javascript I have:

$(document).ready(function () {

$(".classes input[type='checkbox']").click(function(e) {
       var innerTextHTML = $(this).parent("div.selection").children('label').text();
       var planWrap = $("div.plan."+innerTextHTML).parent();

       var detachedContent = $("div.plan."+innerTextHTML).parent();

       if ($(this).is(':checked')){
             planWrap.show();
             detachedContent.appendTo('div.plans-container');
       }else{
             planWrap.detach();
       }
});
});

Now, when I uncheck the box to filter, the rows are displaying correctly with style, but when I re-check the box, my div isn't coming back. Thank you for any help you can provide.

EDIT: Adding snippets of HTML:

Checkbox code:

<div class="speeds" id="int_div_id">
          <h4>Speeds:</h4>
          <div class="checks">
            <div class="selection">
              <input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked">
              <label for="10"><span></span>10</a></label>
            </div>

            <div class="selection">
              <input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked">
              <label for="20"><span></span>20</label>
            </div>

            <div class="selection">
              <input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked">
              <label for="30"><span></span>30</label>
            </div>

          </div>
        </div>

Sample output row (wrapped within the plans-container div):

<div class="plans-container">

<div class="plans plansSlider" id="listings">

  <div class="bundle-hide-me" id="default"><div class="plan-wrap">
        <div class="plan 10">
          <div class="items-wrap">
            <div class="items">

            // content of the div

            </div>
          </div>
        </div>
  </div>
</div>
</div>

EDIT: Desired result:

Here is a sample of how I would like the page to behave:

X 10   X 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a

Then if a box is unchecked:

X 10   _ 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 30 // style-a
Result for 30 // style-b

Then if rechecked:

X 10   X 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a

@guest271314, I wasn't sure what to put there, if I remove that line it still just works so that it detaches, but I can't get it to come back — Robert, May 15 '15 at 01:58
Not entirely certain what expected result is, here ? Not sure how two `html` snippets appear at document ? `.classes` element not appear at `html` ? Though, at first glance could try utilizing `.clone()` http://api.jquery.com/clone instead of duplicating element at one of `planWrap` , `detachedContent` ? — guest271314, May 15 '15 at 02:01
Still not conceptualizing expected results. Though `html` appear to have `` tag after first `` , and trailing extra `` at end of first `html` snippet. — guest271314, May 15 '15 at 02:16

Allen Tellez · Accepted Answer · 2015-05-15T02:35:16.233

Run this. This uses the detach, saves a copy of jquery data and adds it back when needed.

$(document).ready(function () {

var detachedContent;
  
$("input[type='checkbox']").click(function(e) {
  
       var innerTextHTML = $(this).parent("div.selection").children('label').text();
       var planWrap = $("div.plan."+innerTextHTML).parent();

       if ($(this).is(':checked')){
           planWrap.show();
           $('div.plans-container').append(detachedContent);
       }else{
           detachedContent = planWrap.detach();
         
       }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="speeds" id="int_div_id">
          <h4>Speeds:</h4>
          <div class="checks">
            <div class="selection">
              <input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked">
              <label for="10"><span></span>10</a></label>
            </div>

            <div class="selection">
              <input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked">
              <label for="20"><span></span>20</label>
            </div>

            <div class="selection">
              <input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked">
              <label for="30"><span></span>30</label>
            </div>

          </div>
        
<div class="plans-container">

<div class="plans plansSlider" id="listings">

  <div class="bundle-hide-me" id="default"><div class="plan-wrap">
        <div class="plan 10">
          <div class="items-wrap">
            <div class="items">

            // content of the div

            </div>
          </div>
        </div>
  </div>
</div>
</div>

I had tried that just using the show and hide, the problem I was running into is that each returned div should be alternating styles using nth row. When I just did a `planWrap.hide();` it set `style="display:none;"`, so the nth row was still counting it and I was getting: `style-a -- style-a -- style-b -- style-a` — Robert, May 15 '15 at 02:26
Thank you, that mostly works, just having some issues now pulling the detached content into the styled div, but it is much closer than I've been able to get. — Robert, May 15 '15 at 03:17
I fixed my styling issue, but your solution is too good haha. On my initial page I am limiting the display to show 2 of the 10 speed, 2 of the 20, 2 of the 30. In total I have 5 10 speeds, and when I detach it is hiding all 5 of them, then when I return it it is returning all 5, not just the original 2, but, it works, there is just a little more tweaking to do. Thank you very much. — Robert, May 15 '15 at 03:43

Having trouble with jquery detach reshowing div content

1 Answers1