[JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법
OnClick 이벤트에서 DOM 요소 제거하는 방법
DOM 요소를 클릭했을 때, 해당 요소를 제거하려면 다음 순서대로 코드를 작성합니다.
1. DOM 요소를 가져옵니다.
2. click 이벤트 리스너를 추가합니다.
3. 이벤트 핸들러에서 가져온 요소에 대한 remove() 메서드를 호출합니다.
예를 들어, id 속성이 parent인 요소를 클릭했을 때, 요소를 제거하는 코드는 다음과 같습니다.
const parentDiv = document.getElementById('parent');
parentDiv.addEventListener('click', () => {
parentDiv.remove();
});getElementById() 메서드를 사용하여 id 속성이 parent인 요소를 가져온 다음 click 이벤트 리스너를 추가했습니다. 해당 이벤트 핸들러는 id 속성이 parent인 요소를 클릭할 때마다 호출됩니다.
이벤트 핸들러 함수에서 이벤트에 전달된 event 객체의 target 프로퍼티를 사용하여 요소를 제거할 수도 있습니다. target 프로퍼티는 이벤트를 발생시킨 요소를 의미합니다.
const parentDiv = document.getElementById("parent");
parentDiv.addEventListener("click", (e) => {
e.target.remove();
});다음은 HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
#parent {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="parent"></div>
<script src="script.js"></script>
</body>
</html>[실행 결과]
자식 요소 노드를 제거
다음은 자식 요소 노드를 클릭했을 때, 제거하는 방법입니다.
1. 부모 요소를 가져옵니다.
2. 부모 요소를 순회하여 자식 요소에 click 이벤트 리스너를 추가합니다.
3. 이벤트 핸들러에서 event 객체의 target 프로퍼티에 대한 remove() 메서드를 호출합니다.
HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
#parent {
display: flex;
}
.child {
height: 100px;
width: 100px;
margin: 5px;
}
#child-1 {
background-color: red;
}
#child-2 {
background-color: yellow;
}
#child-3 {
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
<div class="child" id="child-1"></div>
<div class="child" id="child-2"></div>
<div class="child" id="child-3"></div>
</div>
<script src="script.js"></script>
</body>
</html>다음은 JavaScript 파일입니다.
id가 parent인 요소의 자식 요소를 HTMLCollection 객체로 가져오기 위해 children 프로퍼티를 호출합니다.
const parentDiv = document.getElementById("parent").children;
for (const childDiv of parentDiv) {
childDiv.addEventListener("click", (e) => {
e.target.remove();
});
}getElementById() 메서드 대신 querySelector() 메서드를 사용할 수 있으며, 부모 요소에 class 속성이 존재하는 경우 getElementsByClassName() 메서드를 사용할 수 있습니다.
getElementById() 메서드 대신 querySelector() 메서드를 호출하는 방법입니다.
const parentDiv = document.querySelector("#parent");
parentDiv.addEventListener("click", (e) => {
e.target.remove();
});[실행 결과]
