remove 和 .append() 将元素返回到其原始状态答案

【问题标题】：remove an .append() to return an element to it's original stateremove 和 .append() 将元素返回到其原始状态
【发布时间】：2013-08-19 17:42:38
【问题描述】：

我正在为图像滑块加载ul，但我需要删除图像 (ul) 并在滑块关闭时恢复到原始状态（在 javascript 操作之前），因为我稍后需要为另一组不同的图像重新加载 ul。

这是我加载滑块的方式。

 var get_images = [ "show_1.jpg", "show_2.jpg", "show_3.jpg", "show_4.jpg"];

 $.each(get_images, function(i,img){
 $('#container ul').append('<li><a href="#" class="thumbnail"><img src="'+img+'"/></a></li>'); 
});

【问题讨论】：

请将您的代码放入 jsfiddle。
或者只是一个有问题的样本就足够了。

标签： javascript jquery html dom dom-manipulation

【解决方案1】：

我认为这可能是您正在寻找的：

var get_images = ["show_1.jpg", "show_2.jpg", "show_3.jpg", "show_4.jpg"];
var original = $('#container ul').html();
$.each(get_images, function (i, img) {
    $('#container ul').append('<li><a href="#" class="thumbnail"><img src="' + img + '"/></a></li>');
});
$("#revert").click( function() {
    $('#container ul').html(original);
});

还原按钮用于演示目的。这个想法基本上是您保存原始内容，以便以后可以在需要时恢复到它。

Fiddle

【讨论】：

【解决方案2】：

如果ul 最初为空，您可以使用.empty() 将其恢复到该状态。

$('#container ul').empty()

【讨论】：

【解决方案3】：

如何获取您添加的最后一个并像这样删除它。：

 $('#container ul li:last').remove();

如果您添加了 3，则重复该行 3 次。每个人都获取最后添加的元素并将其删除。

另一种方式

您还可以跟踪添加的内容：

var addedList = [];

$.each(get_images, function(i,img){
    var added = $.parseHTML('<li><a href="#" class="thumbnail"><img src="'+img+'"/></a></li>');
    $('#container ul').append(added);
    addedList.push(added);
});

删除类似：

for (var i=0; i < addedList.length; ++i) {
    $(addedList[i]).remove();
}
addedList = [];

【讨论】：

谢谢，我认为这是正确的方向，但我需要删除所有这些，而不仅仅是最后一个。
parseHTML 返回原生 DOM 元素。修好了。