I've got a modal window. What I want to happen is to remove certain elements from the page when the modal opens and add them back in right where they were after the modal closes. I don't want to do display:none, because that only hides them, I need them to actually be removed from the page. So I have a bit of jQuery to remove and add them back in after a timer just for testing...

UPDATED: With these additions to the code, it now grabs the element before, then adds it back in after that same element. The issue is, what if that element was also removed? Then it won't add back in! Also, won't javascript event handlers be lost in this? I'm developign a plugin, so it should interfere with the site as little as possibl,e but 3d elements have a bug in them with Safari that is impossible to get around.

Any ideas on how I could temporarily remove 3d elements without interfering with people's site too much?

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'});
$3delementsposition = $3delements.prev()

//On modal open
$3delements.remove();

//On modal close
$3delementsposition.after($3delements);

The problem is that this requires I specify a certain place in the DOM for them to e back in. I'd like the elements to e back in where they were. How can I make sure the elements don't change/move/lost information on the .remove to the .append.

I've got a modal window. What I want to happen is to remove certain elements from the page when the modal opens and add them back in right where they were after the modal closes. I don't want to do display:none, because that only hides them, I need them to actually be removed from the page. So I have a bit of jQuery to remove and add them back in after a timer just for testing...

UPDATED: With these additions to the code, it now grabs the element before, then adds it back in after that same element. The issue is, what if that element was also removed? Then it won't add back in! Also, won't javascript event handlers be lost in this? I'm developign a plugin, so it should interfere with the site as little as possibl,e but 3d elements have a bug in them with Safari that is impossible to get around.

Any ideas on how I could temporarily remove 3d elements without interfering with people's site too much?

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'});
$3delementsposition = $3delements.prev()

//On modal open
$3delements.remove();

//On modal close
$3delementsposition.after($3delements);

The problem is that this requires I specify a certain place in the DOM for them to e back in. I'd like the elements to e back in where they were. How can I make sure the elements don't change/move/lost information on the .remove to the .append.

• javascript
• jquery

• specify "position" in this case. does the order of the elements in it's container matter? are they variable in depth or siblings? do you have bearings that we can anchor a query so we can position relative to it? – Joseph Commented Apr 19, 2012 at 5:31
• I've made some changes to the code, see if they answer your questions... – alt Commented Apr 19, 2012 at 5:41
• although it's possible in jQuery to get the depth and position of the element within the DOM, but i think it's not possible to get the exact position of the element among it's siblings. consider this: what if we prepended/appended/removed siblings or worse, replaced the content in general, then the actual location is now gone. – Joseph Commented Apr 19, 2012 at 5:47

3 Answers 3

1. Use .detach() and .append() to remove and reattach elements, it will maintain all your events and data.

2. If you add elements back in the reverse order that you removed them, they should all fall back in place

untested code

var elems3d = $(...);
var elemsRemoved = [];

// removing
elems3d.each(function(i,o) {
   var elem = $(o);
   elemsRemoved.push({
       loc: elem.prev(),
       obj: elem.detach()
   });
});

// adding back
while (elemsRemoved.length) {
   var elem = elemsRemoved.pop();
   elem.loc.after(elem.obj);
}

Instead of removing the elements, replace them with placeholder elements (using replaceWith) then replace the placeholders with the original content when needed. Something like the following:

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'});
var originals = [];
$3delements.each(function() {
  // Clone original, keeping event handlers and any children elements
  originals.push($(this).clone(true)); 
  // Create placeholder for original content
  $(this).replaceWith('<div id="original_' + originals.length + '"></div>');
});

///
/// Do something asynchronous 
///

// Replace placeholders with original content
for (var i in originals) {
 $('#original_' + (i + 1)).replaceWith(originals[i]);
}

See clone and replaceWith in the jQuery docs for more info.

I have created the fiddle. Let me know if this fulfills your requirement.

http://jsfiddle/mNsfL/12/