CODEWITHSUNDEEP
javascriptjquery
Tomas
Tomas

Reputation: 18117

jQuery element.remove undo

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

Upvotes: 1

Views: 5829

Answers (4)

Andy E
Andy E

Reputation: 344675

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.

Upvotes: 9

Lazarus
Lazarus

Reputation: 43094

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

Upvotes: 2

David Hellsing
David Hellsing

Reputation: 108500

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.)

Upvotes: 3

Tarik
Tarik

Reputation: 81771

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.

Upvotes: 0

Related Questions