使用jQuery撤消所有附加的HTML

Question

我有以下代码。 当用户在较小的窗口中查看时，它将添加和更改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   
        };

但是，当用户随后扩展窗口时，所做的更改将保留在屏幕上。 撤销刚刚完成的操作的最佳方法是什么？ 我知道我可以使用$(window).resize() ，但是我不确定如何还原更改？

任何帮助或指导都会很棒。

Answer 1

我什么都不做。 我会一直将这些元素包含在页面中，并在所有仅较小窗口的元素中添加类似“ narrow”的类。 然后，在我的CSS中：

@media screen and (min-width:600px) {
  .narrow {
    display: none;
  }
}

将它们隐藏在更大的窗口中。

Answer 2

单程：

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

Answer 3

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

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

Answer 4

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