-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
안녕하세요 질문이 있습니다.
19.12.27 19:27 작성 조회수 136
0
직접 예제를 해보았는데, 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
예제를 잘못 따라한건지 다시 살펴보았는데, 뭐가 잘못된건짐 모르겠네요..
답변을 작성해보세요.
0
1분코딩
지식공유자2020.01.02
안녕하세요- 소스코드를 수정해서 업로드 했습니다.
말씀해 주신 부분이 맞습니다! nth-of-type을 활용하려다보니, 오류가 있었습니다.
발견해주셔서 정말 감사드립니다.
예제처럼 nth-of-type을 이용하려면, removeChild로 없애는게 아니라 display:none으로 시각적으로만 제거해 주시면 됩니다.
업로드한 소스에서는 따로 a, b, c 클래스를 만들어서 removeChild로 처리하도록 했습니다.
강의목록의 구름모양 아이콘을 누르시면 소스코드를 받으실 수 있습니다.
0
1분코딩
지식공유자2019.12.29
현재는 마지막 복잡한 예제의 소스만 업로드 되어있는데,
다른 예제들 소스를 모두 업데이트 하려고 정리 중입니다.
곧 업데이트 후에 공지할테니 그때 소스를 다운로드 받아 참고해 주시면 될 것 같습니다 ^^
답변 2