Hello,
I have code(thanks to roosteronacid) which removes web page elements when user click on them. I need to add additional functionality to undo action - revert removed elements. Any idea how to do element.remove undo with jQuery?
Regards, Tomas
A:
Well instead of removing them, you can do jQuery("#someElement").hide(); and then after if you want to get them back jQuery("#someElememt").show(); would be nice solution. Since its alters it display property.
Braveyard
2010-08-17 12:01:57
+6
A:
You can store a reference to removed elements by assigning the return value of remove() to a variable:
// Remove the element and save it in a variable
var removed = $('#myElement').remove();
Later, providing the variable is in scope, we can add the element back using various DOM insertion methods:
// Insert the removed element back into the body
removed.insertAfter('#anotherElement');
Looking at the code provided by roosteronacid, it doesn't save the reference so you would have to modify that code accordingly.
Andy E
2010-08-17 12:03:51
In addition, perhaps `.remove()` should be changed to `.detach()` in order to preserve the `mouseenter` (assuming that's what is desired).
patrick dw
2010-08-17 12:19:08
Surely this would lose the structure of the document over time, i.e. remove/detach -> appendTo body -> remove/detach -> appendTo body.
Lazarus
2010-08-17 12:57:19
@Lazarus: *appendTo()* was provided purely as an example of returning the element to the document. The structure would be affected by removing and appending, unless you removed the last item, of course.
Andy E
2010-08-17 13:05:49
@Andy-E Thanks for that, thought I was missing something there :)
Lazarus
2010-08-17 13:07:47
+2
A:
There is another method for this: .detach: http://api.jquery.com/detach/ that removes an element without destroying it.
You still have to "save" the element though (look at the example provided in the docs.)
David
2010-08-17 12:20:59
+2
A:
You could take the approach many apps take for undo and save the complete body state before each remove, I've reworked @roosteronacid's code thus:
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="index_files/jquery-1.js" type="text/javascript"></script>
<script src="index_files/index.js" type="text/javascript"></script>
<title>index</title>
<script type="text/javascript">var stack = Array();</script>
</head><body>
<h1>Test</h1>
<p>Test</p>
<div>Test</div>
<a href="#">Test</a>
<span>Test</span>
<a href="#" OnClick = "$('body').html(stack.pop()); initialise();">Undo</a>
</body></html>
index.js
$(function ()
{
initialise();
});
function initialise() {
$("* :not(body,a)").mouseenter(function ()
{
var that = $(this);
var offset = that.offset();
var div = $("<a />",
{
"title": "Click to remove this element",
css: {
"position": "absolute",
"background-color": "#898989",
"border": "solid 2px #000000",
"cursor": "crosshair",
width: that.width() + 6,
height: that.height() + 2
},
offset: {
top: offset.top - 4,
left: offset.left - 4
},
click: function ()
{
div.remove();
var state = $("body *");
stack.push(state);
that.remove();
},
mouseleave: function ()
{
div.fadeTo(200, 0, function ()
{
div.remove();
});
}
});
that.after(div.fadeTo(200, 0.5));
});
};
Lazarus
2010-08-17 12:36:45