Store the original parent of a DIV element

Question

I am moving the position (and parents) of a div element using the insertAfter function. Something like this:

$('.annotation i').click(function(){
    $('.annotation').find('.comment').insertAfter('#container');
});

I would like to know if it is possible somehow to store the original parent in order to move the div element back to its original position (under the original parent) after another user action.

Thanks.

What Blaze meant: `$('.yourDiv').hide().clone().appendTo('#container').show().addClass('clone');` Will grab .yourDiv, hide it, clone it, append, show the cloned and add a class to the clone (so you can do `$('.yourDiv.clone')` later. — RaphaelDDL, May 07 '13 at 14:25
@RaphaelDDL this element will suffer modifications after being moved. It contains a textarea and therefor I would need to clone it again, remove the original one, and add this one to go back to the original state. Isn't it just more simple to move it again? — Alvaro, May 07 '13 at 14:31
You could do `$('.yourDiv').replaceWith('.yourDiv.clone').show();` when you need to go back to the first place. (show is because yourDiv was hidden when we cloned). — RaphaelDDL, May 07 '13 at 17:25

score 2 · Answer 1 · answered May 07 '13 at 14:22

var parent = $('.annotation').find('.comment').parent();

Will give you the parent of the .comment class' element.

You mention storing the position of it as well. You may find JQuery Index helpful. Either storing the parent's index or storing the particular .comment element's location in a similar fashion for later use.

score 2 · Answer 2 · answered May 07 '13 at 14:28

This one stores a reference to the original parent using the .data() function.

$('.annotation i').click(function(){
    $('.annotation').find('.comment').each(function() {
        $(this).data('oparent', $(this).parent());
        $(this).insertAfter('#container');
    });
});

function anotherUserAction(comment) {
    comment.appendTo(comment.data('oparent'));
}

Blazemonger · Answer 3 · 2013-05-07T14:36:16.297

1

You can create a clone of the element and hide the original:

$e = $('element');
$c = $e.clone();
$e.hide();

Then you can either destroy the moved element and show the original again:

$e.show();
$c.remove();

or replace the original with the moved one:

$e.replaceWith($c);

http://api.jquery.com/clone

If the original element has an ID attribute, you'll want to change or remove it on the clone as well so that all elements retain unique IDs:

$c.attr('id','new-unique-string');
// or
$c.removeAttr('id');

edited May 07 '13 at 14:36

answered May 07 '13 at 14:23

Blazemonger

90,923
26
142
180

Which is the advantage of cloning instead of moving it if any? – Alvaro May 07 '13 at 14:26
You don't have to store the parent at all, because the original element is exactly where you left it. – Blazemonger May 07 '13 at 14:28
@Steve you can keep the original one hidden if sometime you need to hide the clone and 'move back' to the original place (a.k.a. "in order to move the div element back to its original position" you said). – RaphaelDDL May 07 '13 at 14:28
@Blazemonger this element will suffer modifications after being moved. It contains a textarea and therefor I would need to clone it again, remove the original one, and add this one to go back to the original state. Isn't it just more simple to move it again? – Alvaro May 07 '13 at 14:32
If you're modifying the clone, use [`$e.replaceWith($c);`](http://api.jquery.com/replaceWith/) instead. You still benefit from having the original hidden in its original place. – Blazemonger May 07 '13 at 14:32
Textarea content is not cloned if it was modified before it. I still thinking it is much more simple just to move the `DIV`... – Alvaro May 08 '13 at 09:37
(a) You didn't say anything about a textarea in your original question, and (b) it's trivial to [copy the value of a textarea when you clone it](http://jsfiddle.net/mblase75/fPWwQ/) (at least until they [fix the bug](http://bugs.jquery.com/ticket/3016)). – Blazemonger May 08 '13 at 13:32

Store the original parent of a DIV element

3 Answers3