[JavaScript] JavaScript 자식 요소 전부 삭제하기

JavaScript

[JavaScript] JavaScript 자식 요소 전부 삭제하기

teamnova 2021. 11. 26. 12:30

728x90

안녕하세요.

이번에는 JavaScript에서 특정 태그의 하위에 존재하는

자식 Element들을 전부 삭제하는 것을 간단한게 구현해보도록 하겠습니다

스틱코드에 업로드 해놨기 때문에, 즐겨찾기를 하시면 손쉽게 사용이 가능하십니다.

https://stickode.com/detail.html?no=2615

스틱코드

stickode.com

1. index.html

html 파일입니다.

여기서 CSS파일과 JS파일을 연결하고

임의로 자식요소를 추가하는 버튼 한개와 모든 자식을 삭제하는 버튼을 body에 추가하고

추가한 자식이 들어갈 부모 요소도 선언해줍니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>자식 삭제</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- css 추가 하는 위치 -->
    <link href="page.css" rel="stylesheet">
</head>


<body>
    <button id="addBtn">추가</button>
    <button id="allRemoveBtn">모두삭제</button>

	<!-- 자식이 추가되고 삭제되는 요소임 -->
    <div id="area"></div>

    <!-- 테스트 js 연결하기 -->
    <script type="text/javascript" src="test.js"></script>
</body>

</html>

2.Page.css

추가된 자식요소를 눈으로 확인하기 위해서 높이와 너비값을 주고

배경을 빨간색으로 선언합니다.

html,
body {
  height: 100%;
  padding: 0%;
  margin: 0%;
}


.item {
  height: 100px;
  width: 100px;
  background: red;
  margin: 1%;
}

3.test.js

마지막으로 JavaScript 파일을 작성하겠습니다

const addBtn = document.getElementById("addBtn");
const allRemoveBtn = document.getElementById("allRemoveBtn");
const area = document.getElementById("area");



//버튼에 클릭이벤트 추가
addBtn.addEventListener('click', function () {
    let div = document.createElement('div');//div 태그 만들기
    div.classList.add('item');//div의 class에 item 추가

    //위에서 생성한 div를 area의 자식요소로 추가하기
    area.appendChild(div);
});
allRemoveBtn.addEventListener('click', function () {
    removeAllchild(area); //area 안에 존재한는 element 삭제
});


//@@@@ 스틱코드에 등록된 함수 @@@@

//입력 받은 요소의 자식 노드를 모두 삭제하는 함수
function removeAllchild(div) {
    while (div.hasChildNodes()) {
        div.removeChild(div.firstChild);
    }
}

//@@@@ 스틱코드에 등록된 함수 @@@@

마지막으로 시연영상을 보고 마무리 짓겠습니다.

시연영상