CODEWITHSUNDEEP
javascriptjquery
alt
alt

Reputation: 13907

Remove Elements From The DOM And Add Them Back In Where They Were

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 come back in. I'd like the elements to come back in where they were. How can I make sure the elements don't change/move/lost information on the .remove to the .append.

Upvotes: 6

Views: 10091

Answers (3)

rkw
rkw

Reputation: 7297

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

Upvotes: 10

Anirban
Anirban

Reputation: 589

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

http://jsfiddle.net/mNsfL/12/

Upvotes: -5

leepowers
leepowers

Reputation: 38318

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.

Upvotes: 5

Related Questions