Javascript 使用jQuery撤消所有附加的HTML

我有以下代码。当用户在较小的窗口中查看时，它会添加和更改HTML：

        if ($(window).width() < 600) {
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');
            $('.col45').insertAfter('.col55');
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');

            $('<span class="slide-left"></span>' + '<span class="slide-right"></span>').appendTo('.main-slide');

        } else {

            //    REVERT BACK TO NORMAL   
        };

if（$（窗口）.width（）<600）{
$（'.btn-ar.view-gallery'）。后面插入（'.slideshow float right'）；
$（'.col45'）。后面插入（'.col55'）；
$（'.btn-ar.view-gallery'）。后面插入（'.slideshow float right'）；
$（''+''）。附加到（''主幻灯片'）；
}否则{
//恢复正常
};

但是，当用户随后展开窗口时，更改保留在屏幕上。撤销刚刚做过的事情的最佳方式是什么？我知道我可以使用

$（window）.resize（）

，但我不确定如何恢复更改

---

任何帮助或指导都会很好

我不会那样做。我会一直在页面中包含这些元素，在所有较小的纯窗口元素中添加一个类似“窄”的类。然后，在我的CSS中：

@媒体屏幕和（最小宽度：600px）{
.狭窄{
显示：无；
}
}

将它们隐藏在较宽的窗口中。

单向：

在else条件中插入此代码

    $('.slideshow-float-right").next('.btn-ar.view-gallery').remove();
    $('.col55').next('.col45').remove();
    $('.main-slide').find('.slide-left').remove();
    $('.main-slide').find('.slide-right').remove();

否则

添加元素时，向这些元素添加一个唯一的类，例如

smallScreen

然后在else条件下：

if ($(window).width() < 600) {
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');
            $('.col45').insertAfter('.col55');
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');

            $('<span class="slide-left"></span>' + '<span class="slide-right"></span>').appendTo('.main-slide');

        } else {
               $(".smallScreen").remove();
        };

if（$（窗口）.width（）<600）{
$（'.btn-ar.view-gallery'）。后面插入（'.slideshow float right'）；
$（'.col45'）。后面插入（'.col55'）；
$（'.btn-ar.view-gallery'）。后面插入（'.slideshow float right'）；
$（''+''）。附加到（''主幻灯片'）；
}否则{
$（“.smallScreen”）.remove（）；
};

试试这个。您必须将所有类存储在一个数组中。这里我存储了示例类..你需要一个附加类的存储

 var addedClass = new Array('btn-ar.view-gallery', 'col45', 'btn-ar.view-gallery', 'slide-right');


        if ($(window).width() < 600) {
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');
            $('.col45').insertAfter('.col55');
            $('.btn-ar.view-gallery').insertAfter('.slideshow-float-right');

            $('<span class="slide-left"></span>' + '<span class="slide-right"></span>').appendTo('.main-slide');

        } else {

            for (var i in addedClass) {
                $("." + addedClass[i]).remove();
            }
        };

var addedClass=新数组（'btn-ar.view-gallery'，'col45'，'btn-ar.view-gallery'，'slide right'）；
如果（$（窗口）.width（）<600）{
$（'.btn-ar.view-gallery'）。后面插入（'.slideshow float right'）；
$（'.col45'）。后面插入（'.col55'）；
$（'.btn-ar.view-gallery'）。后面插入（'.slideshow float right'）；
$（''+''）。附加到（''主幻灯片'）；
}否则{
for（加法类中的var i）{
$（“+addedClass[i]）。删除（）；
}
};

AFAIK没有神奇的方法可以恢复对DOM元素顺序所做的更改（因为我假设是页面加载），因为它们的原始位置没有存储

您可以手动将每个元素存储在原始位置，或者尝试以下方法以轻松修复：

var original_html = '';

if ($(window).width() < 600) {
    if (!original_html)
        original_html = $("body").html();
    //Do your manipulation
} else {
    //Restore everything
    if (original_html)
        $("body").html(original_html);
};

var-original\u html=''；
如果（$（窗口）.width（）<600）{
如果（！原始_html）
原始html=$（“body”）.html（）；
//做你的操纵
}否则{
//恢复一切
如果（原件）
$（“body”）.html（原件）；
};

我想你必须删除你添加的所有内容。看起来这些元素可能在页面上，也可能是隐藏的。我会使用一个唯一的类来识别这些元素（当它们被添加时），然后删除所有具有类名的元素。这样你就不用担心逻辑了。为什么要使用js来完成此任务？这只能通过帮助css媒体查询来完成。我建议改为使用css和媒体查询-看来你所做的只是显示或隐藏内容。我想我必须这样做。我试图不在同一个页面上重复HTML，但这可能与添加HTML一样快？