안녕하세요 질문이 있습니다.

미해결질문
J K 프로필

직접 예제를 해보았는데, removeChild후 child 이미지가 차례대로 다시 적용되는데, 예제랑 달라서 질문 드립니다.

div.stage

 div.img
 div.img
 div.img

------
css

.img:nth-of-type(1){
...
background-image:url(image1);

}

.img:nth-of-type(2){
...
background-image:url(image2);
}

.img:nth-of-type(3){
...
background-image:url(image3);
}

위 상태에서 상단 첫번째 div.img 를 클릭하여 removeChild 하면 첫번째 div랑 image1이 같이 삭제되는 것처럼 보이는게 아니라 첫번째 child가 삭제된 후 child가 두개가 남고

.img:nth-of-type(1)
.img:nth-of-type(2) 가 다시 적용되어 image3이 날라가는 듯한 결과로 나옵니다. 

div.stage

 div.img - image1
 div.img - image2

예제를 잘못 따라한건지 다시 살펴보았는데, 뭐가 잘못된건짐 모르겠네요..

1분코딩 프로필
1분코딩 7달 전

현재는 마지막 복잡한 예제의 소스만 업로드 되어있는데,
다른 예제들 소스를 모두 업데이트 하려고 정리 중입니다.
곧 업데이트 후에 공지할테니 그때 소스를 다운로드 받아 참고해 주시면 될 것 같습니다 ^^

1분코딩 프로필
1분코딩 7달 전

안녕하세요- 소스코드를 수정해서 업로드 했습니다.
말씀해 주신 부분이 맞습니다! nth-of-type을 활용하려다보니, 오류가 있었습니다.
발견해주셔서 정말 감사드립니다.
예제처럼  nth-of-type을 이용하려면, removeChild로 없애는게 아니라 display:none으로 시각적으로만 제거해 주시면 됩니다.
업로드한 소스에서는 따로 a, b, c 클래스를 만들어서 removeChild로 처리하도록 했습니다.
강의목록의 구름모양 아이콘을 누르시면 소스코드를 받으실 수 있습니다.

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스