刪除.append（）以將元素返回到其原始狀態

Question

我正在為圖像滑塊加載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>'); 
});

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

還原按鈕用於演示目的。 基本上，您的想法是保存原始內容，以便以后在需要時可以還原到原始內容。

小提琴

Answer 2

如果ul最初為空，則可以使用.empty()將其恢復為該狀態。

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

Answer 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 = [];