안녕하세요.
이번에는 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);
}
}
//@@@@ 스틱코드에 등록된 함수 @@@@마지막으로 시연영상을 보고 마무리 짓겠습니다.
시연영상
'JavaScript' 카테고리의 다른 글
| [JavaScript] hash 암호화 (0) | 2021.12.10 |
|---|---|
| [JavaScript] ajax로 get/post 전송하기 (2) | 2021.12.06 |
| [JavaScript] 탭 메뉴 만들기 (0) | 2021.11.20 |
| [JavaScript]마우스 오버시 이미지 확대하기 (0) | 2021.11.19 |
| [JavaScript] GET/POST 전송 (0) | 2021.11.11 |
