How to toggle elements in and out of DOM using jQuery detach() method?

Question

I have a group of divs arranged in a grid.

To style each div I\'m selecting them with the nth-child() pseudo-class.

div.tile:nth-child(4n-7)         


        

Answer 1

I'm not very sure if this what you'd like to do - http://jsfiddle.net/tfyfpbb2/1/

If so, you just need to add three row classes instead of one. This way each row has it's own "space" and will not miss up the next row's styling.

<div class="row">
    <div class="tile">
        <div class="text">01</div>
    </div>

    <div class="tile">
        <div class="text">02</div>
    </div>

    <div class="tile">
        <div class="text dolphin">03</div>
    </div>

    <div class="tile">
        <div class="text">04</div>
    </div>
</div> 

Hope that helps! Let me know if that's not what you wanted and I can edit my answer.

Answer 2

Everyone was close, but here is exactly what you are looking for with your current html markup: http://jsfiddle.net/vs5o5nLb/2/

The trick is setting yourself up ahead of time with what you need to actually toggle, then keeping that information around to insert and detach from.

var $els = $( '.tile' );
var stack = [];
var isShown = true;

$els.each(function() {
    var $this = $( this );
    if ( $this.find('.dolphin').length ) {
        stack.push({
            $el : $this,
            index : $els.index( this )
        });
    }
});

$('.hide-divs').click(function () {
    if ( isShown ) {
        $.each(stack, function() {
            this.$el.detach();
        });
        isShown = false;
    } else {
        $.each(stack, function() {
            $('.tile').eq( this.index ).before( this.$el );
        });
        isShown = true;
    }
});

I hope it helps.

Answer 3

I have used remove() with toggle to remove and delete elements. example: each time on mouse hover and check if text is printed in unordered list and then elements are removed on the next click. Jquery

        $('h1').hover(function(){
                //alert('test toggle');
               remove_el();
               for(var i=0;i<5;i++){ 
               $('ul').append('<li>'+'END_check else'+i+'</li>').toggle();

                 }
               }

                );

            function remove_el(){

                $('li').remove();
            };

Answer 4

I suggest still using detach. You can do so with this code:

var divs;

$('.hide-divs').on('click', function () {
    if(divs) {
        $(divs).appendTo('.row');
        divs = null;
    } else {
        divs = $('.dolphin').parent().detach();
    }
});

Then to ensure that the same order is used, I came up with this bit of code:

$('.tile').each(function(i){
    $(this).data('initial-index', i);
});

...

$(divs).each(function(){
    var oldIndex = $(this).data('initial-index');
    $('.tile').eq(oldIndex).before(this);
});

Put it all together and we get this code:

var divs;

$('.tile').each(function(i){
    $(this).data('initial-index', i);
});

$('.hide-divs').on('click', function () {
    if(divs) {
        $(divs).appendTo('.row').each(function(){
            var oldIndex = $(this).data('initial-index');
            $('.tile').eq(oldIndex).before(this);
        });
        divs = null;
    } else {
        divs = $('.dolphin').parent().detach();
    }
});

Demo on jsfiddle: http://jsfiddle.net/tqbzff2v/2/