удалите .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); 
}); 

Кнопка возврата предназначена для демонстрации. Идея в основном заключается в том, что вы сохраняете исходный контент, чтобы впоследствии при необходимости вернуться к нему.

Fiddle

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