요소를 원래 상태로 되돌리려면 .append()를 제거하십시오.

Question

이미지 슬라이더에 대해 ul을로드하지만 이미지 (ul)를 제거하고 자바 스크립트 조작 이전의 상태로 되돌려 야합니다. 나중에 슬라이더가 닫히면 다른 이미지 세트에 대해 ul을 다시로드해야하기 때문입니다.

다음은 슬라이더를로드하는 방법입니다. 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 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); 
}); 

같은 뭔가 삭제를 찾고있는 내용 :

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

당신은 다시 그 상태로 그걸 얻기 위해 .empty()를 사용할 수 있습니다.

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

Answer 3

당신이 3을 추가 한 경우 추가 한 마지막을 받고 이런 식으로 삭제에 대한

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

.: 방법, 그 라인을 3 회 반복한다. 각 요소는 마지막으로 추가 된 요소를 가져와 제거합니다.

---

또 다른 방법

또한 함께 추가 된 것을 추적 유지할 수 있습니다 :이있을 것 같아요

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