Question

我有代码（感谢roosteronacid），当用户点击它们时会删除网页元素。我需要添加其他功能来撤消操作 - 还原已删除的元素。知道怎么做element.remove用jQuery撤消？

此致托马斯

Answer 1

您可以通过将 remove（）的返回值分配给变量来存储对已删除元素的引用：

// Remove the element and save it in a variable
var removed = $('#myElement').remove();

稍后，提供变量在范围内，我们可以使用various DOM insertion方法添加元素：

// Insert the removed element back into the body
removed.insertAfter('#anotherElement');

查看代码provided by roosteronacid，它不会保存引用，因此您必须相应地修改该代码。

Answer 2

还有另一种方法：.detach：http://api.jquery.com/detach/删除元素而不销毁它。

您仍然需要“保存”该元素（请参阅文档中提供的示例。）

Answer 3

你可以采取许多应用程序撤消的方法并在每次删除之前保存完整的身体状态，因此我重写了@ roosteronacid的代码：

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

Answer 4

好吧而不是删除它们，你可以jQuery("#someElement").hide();然后如果你想让它们回来jQuery("#someElememt").show();那将是一个很好的解决方案。因为它改变了它display属性。

jQuery element.remove撤消

4 个答案:

的index.htm

index.js