Member Avatar for vishalkhialani

Hi,
Below is my code which I am using to remove a div tag. I also want the script to add the same div tag later once certain conditions are meet. The div has some preloaded content too which I don't want to loose. I tried the add() function but it did not work for me. I even don't think append will work as I want to original div to reappear.

$('#wrapper1').remove();

Any help will be highly appreciated.

Cheers, Vishal

  • 2 Contributors
  • 2 Replies
  • 181 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vishalkhialani

Dani AI

Generated

Short addendum to the thread: wanted the original div (including its preloaded content and handlers) to reappear later. ’s variable approach is fine, but here are a few additional, practical options and caveats that help in different situations.

If you want to remove the element from the document but keep its jQuery data and event handlers intact, use detach. It removes the node from the DOM but preserves its internal state so you can reinsert it unchanged later.

var keptNode = $('#myWidget').detach();
// ...when ready to show it again
keptNode.appendTo('#targetContainer');

If you need a fresh copy while keeping the original (or you want a duplicate that includes jQuery-bound handlers), clone with the data/events flags. Note native addEventListener handlers or non-jQuery-bound handlers may not be cloned.

var copy = $('#myWidget').clone(true, true);
copy.appendTo('#targetContainer');

For form fields and dynamic user-entered state: detach preserves current input values, but cloning or re-creating HTML may not. One robust pattern is to serialize the form state before removal and restore it on reinsertion.

var saved = $('#formWidget').serializeArray();
// later: iterate saved to restore each field's value

Finally, prefer delegated event handlers (bind to a stable ancestor or document) so rebuilt or reinserted elements respond without manual rebinding. Also remember to null out long-lived JS references when the element is truly disposable to avoid holding memory (for example, keptNode = null when you no longer need it).

Recommended Answers

All 2 Replies

Member Avatar for Airshow

Vishal,

As it says in the jQuery API, jQuery.remove() returns jQuery , so you can do something like this:

var x = $('#myDiv').remove();
//.......
$('#myElement').append(x);//or .after() or .prepend() depending on how you need to insert x back into the DOM. Of course, like any javascript member, x must be in scope, or formally passed to a function that operates on it.

If x is neither directly in scope, kept alive by closure nor global, then it will be inaccessible and/or lost to garbage collection.

If scope issues make things difficult, you could alternatively move myDiv inside a hidden DOM element (eg another div reserved for this purpose) from which it can be recovered at any point in the code regardless of scope (the DOM is effectivey global). The move in would typically be performed with .append() while the move back out would be performed with .append(), .after() or .prepend().

Airshow

Edited by Airshow because: n/a
Member Avatar for vishalkhialani

Vishal,

As it says in the jQuery API, jQuery.remove() returns jQuery , so you can do something like this:

var x = $('#myDiv').remove();
//.......
$('#myElement').append(x);//or .after() or .prepend() depending on how you need to insert x back into the DOM. Of course, like any javascript member, x must be in scope, or formally passed to a function that operates on it.

If x is neither directly in scope, kept alive by closure nor global, then it will be inaccessible and/or lost to garbage collection.

If scope issues make things difficult, you could alternatively move myDiv inside a hidden DOM element (eg another div reserved for this purpose) from which it can be recovered at any point in the code regardless of scope (the DOM is effectivey global). The move in would typically be performed with .append() while the move back out would be performed with .append(), .after() or .prepend().

Airshow

thanks, Airshow . I used the the .append() and it worked :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.