Re-attaching jQuery detach();

Question

I have detached a div and want to re-attach it when clicking on a button.

Here\'s the code:

$(\'#wrapper\').detach();

$(\"#open_menu\").click(functi         


        

Answer 1

I think this is largely a matter of recording the index of the element that will be detached, before detaching it, then using that index for determining where to re-attach the element. Consider the following "repl" https://repl.it/@dexygen/re-attach and the code below. The setTimeout is merely so you can see the element in the page before it gets detached, and a couple of elements have been renamed. I wonder if siblings can be used instead of parent().children() but am concerned what happens in the event the detached sibling is the only element among siblings, and we need a reference to parent anyway, for prepending if index === 0.

setTimeout(function() {
    var bar = $('#bar');
    var parent = bar.parent();
    var index = parent.children().index(bar);

    bar.detach();

    $("#re-attach").one('click', function() {
        if (index === 0) {
            parent.prepend(bar);  
        }
        else {
            parent.children().eq(index-1).after(bar);
        }
    });
}, 5000);

Answer 2

jQuery does not offer an attach method. Consider that detach is the equivalent of permanently deleting an item from the Dom. If you believe that you might want to remove and later bring back an element, consider the following options:

1. Use the toggle method. To hide and unhide elements from the page.
2. If you must absolutely remove the item from the Dom, consider using the jQuery clone method, to first make a copy of the specified element, which you can then later reintroduce the element copy back to the Dom.

The above are not the only two ways to accomplish this, however, they are simply and would likely not require much code changes on your end.

Answer 3

$(function(){
 var detached = $('#element_to_detach').detach();
 // Here We store the detach element to the new variable named detached
 $('.element_after_which_you_need_to_attach').after(detached);
});

Answer 4

How about prepend() the detached element after assigning it to a variable, ie.

var det_elem = $('#wrapper').detach();
$("#open_menu").click(function(){
    $(this).prepend(det_elem);
});

prepend() will attach at the beginning of the element.

Answer 5

var el = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append(el);
});

Answer 6

var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append($wrapper[0])
});