82. (javascript/자바스크립트) 특정 객체에 포함된 자식 삭제 (제거) 실시 - childElementCount , removeChild

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다
    	2. document.getElementById(객체) : 특정 객체 매핑을 설정합니다 
    	3. childElementCount : 특정 객체에 포함된 자식 개수를 확인합니다
    	4. removeChild : 특정 객체에 포함된 자식을 삭제합니다     	
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");   	
    	};


    	/* [이벤트 수행 함수] */
    	function clickFunction(){
    		//특정 객체 아이디 설정 실시 
    		var parentTag = document.getElementById("one_container");
    		var beafore_count = parentTag.childElementCount;
    		console.log("[clickFunction] [beafore child count] : " + beafore_count);

    		
    		//반복문을 돌면서 포함된 자식 순차적 제거
    		while ( parentTag.hasChildNodes() ) { 
    			parentTag.removeChild( parentTag.firstChild ); 
    		};


    		//자식 제거 후 컨테이너 포함 자식 재확인 실시 
    		var after_count = parentTag.childElementCount;
    		console.log("[clickFunction] [after child count] : " + after_count);
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

[삭제 (전)]

​

[삭제 (후)]​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다

2. document.getElementById(객체) : 특정 객체 매핑을 설정합니다

3. childElementCount : 특정 객체에 포함된 자식 개수를 확인합니다

4. removeChild : 특정 객체에 포함된 자식을 삭제합니다

*/

/* =========================== */