CODEWITHSUNDEEP
jquery
Jacques Goudreau
Jacques Goudreau

Reputation: 511

Re-attaching jQuery detach();

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(function(){
    ATTACH HERE !!!
});

Any help will be appreciated.

Upvotes: 34

Views: 81114

Answers (8)

Samwel Walter
Samwel Walter

Reputation: 11

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.

Upvotes: 1

Femi
Femi

Reputation: 1322

I needed a solution that would work even if there are other elements after the target element to detach and then reattach. This means that append may not be reliable because it would move that element back to the end of its parent. I had to use a placeholder which may not be the most elegant solution, but I haven't found another way..

var $wrapper = $('#wrapper')
    , $placeholder = $('<span style="display: none;" />')
        .insertAfter( $wrapper )
    ;
$wrapper.detach();

$("#open_menu").on('click',function(){
    $wrapper.insertBefore( $placeholder );
    $placeholder.remove();
});

To make this more reusable, it might be better to wrap it in a jQuery plugin:

(function($){

    $.fn.detachTemp = function() {
        this.data('dt_placeholder',$('<span style="display: none;" />')
            .insertAfter( this ));
        return this.detach();
    }

    $.fn.reattach = function() {
        if(this.data('dt_placeholder')){
            this.insertBefore( this.data('dt_placeholder') );
            this.data('dt_placeholder').remove();
            this.removeData('dt_placeholder');
        }
        else if(window.console && console.error)
        console.error("Unable to reattach this element because its placeholder is not available.");
        return this;
    }

})(jQuery);

Usage:

var $wrapper = $('#wrapper').detachTemp();
$("#open_menu").on('click',function(){
    $wrapper.reattach();
});

Upvotes: 24

Dexygen
Dexygen

Reputation: 12561

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);

Upvotes: 4

ErvTheDev
ErvTheDev

Reputation: 4517

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

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

Upvotes: 3

Saif-ur- Rehman
Saif-ur- Rehman

Reputation: 43

$(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);
});

Upvotes: 3

PuReWebDev
PuReWebDev

Reputation: 147

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.

Upvotes: -10

Mensur Grišević
Mensur Grišević

Reputation: 593

if you want your item to attach at the beginning of the element you could use .prepend()

otherwise you could attach it using append().

in your case it would be:

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

$("#open_menu").click(function(){
    //ATTACH HERE !!!
    $(this).prepend($wrapper); // or $(this).append($wrapper);
});

I hope it helps :)

Upvotes: 6

user1726343
user1726343

Reputation: 

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

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

Upvotes: 61

Related Questions