📅 날짜: 2025-02-19
📚 학습 내용
🔹 4. 동적 리스트 생성 및 삭제 (DOM 조작)
📌 개념 정리
버튼을 클릭하면 새로운 항목을 동적으로 추가하고, 삭제 버튼을 클릭하면 해당 항목을 제거하는 기능을 구현했다.
document.createElement(): 새로운 요소를 생성appendChild(): 부모 요소에 새 요소 추가remove(): 특정 요소를 삭제addEventListener(): 클릭 이벤트 추가
📌 코드 원본 (설명 포함)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic List</title>
<style>
.container { margin-top: 10px; }
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border: 1px solid gray;
margin-top: 5px;
}
.delete-btn {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 입력 필드와 버튼 -->
<input type="text" class="input" placeholder="항목 입력">
<button class="btn">추가</button>
<div class="container"></div>
<script>
// ✅ 1. 요소 선택
const inputEl = document.querySelector('.input'); // 입력 필드
const btnEl = document.querySelector('.btn'); // 추가 버튼
const containerEl = document.querySelector('.container'); // 리스트 컨테이너
// ✅ 2. 버튼 클릭 시 새로운 리스트 아이템 추가
btnEl.addEventListener('click', () => {
const text = inputEl.value.trim(); // 입력값 가져오기 + 공백 제거
// 입력값이 없으면 경고창 표시 후 함수 종료
if (text === '') {
alert("항목을 입력하세요!");
return;
}
createNode(text); // 새로운 항목 생성 함수 호출
inputEl.value = ''; // 입력 필드 초기화
});
// ✅ 3. 새로운 리스트 항목 생성 함수
function createNode(text) {
const divEl = document.createElement('div'); // 새로운 div 생성
divEl.classList.add('item'); // 클래스 추가
const textEl = document.createElement('span'); // 텍스트를 표시할 요소
textEl.textContent = text; // 입력값 설정
const deleteBtn = document.createElement('button'); // 삭제 버튼 생성
deleteBtn.textContent = "삭제";
deleteBtn.classList.add('delete-btn'); // 버튼 스타일 추가
// ✅ 4. 삭제 버튼 클릭 시 해당 항목 제거
deleteBtn.addEventListener('click', () => {
divEl.remove(); // 리스트에서 해당 요소 삭제
});
// 요소 조합 후 리스트 컨테이너에 추가
divEl.appendChild(textEl);
divEl.appendChild(deleteBtn);
containerEl.appendChild(divEl);
}
</script>
</body>
</html>📌 코드 실행 흐름 분석
1️⃣ 입력 필드, 버튼, 리스트 컨테이너 요소 선택
const inputEl = document.querySelector('.input');
const btnEl = document.querySelector('.btn');
const containerEl = document.querySelector('.container'); ✅ querySelector()를 사용하여 HTML 요소들을 변수에 저장
2️⃣ 버튼 클릭 시 이벤트 추가
btnEl.addEventListener('click', () => {
const text = inputEl.value.trim();
if (text === '') {
alert("항목을 입력하세요!");
return;
}
createNode(text);
inputEl.value = '';
});✅ 버튼 클릭 시 입력값을 가져와 공백 제거 후 유효성 검사 진행
🚀 입력값이 있으면 createNode(text)를 호출하여 새 항목을 생성
3️⃣ 새로운 리스트 항목 생성 (createNode())
function createNode(text) {
const divEl = document.createElement('div');
divEl.classList.add('item');
const textEl = document.createElement('span');
textEl.textContent = text;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = "삭제";
deleteBtn.classList.add('delete-btn'); ✅ document.createElement()를 사용하여 새로운 <div>, <span>, <button> 요소를 생성
4️⃣ 삭제 버튼 클릭 시 리스트 항목 제거
deleteBtn.addEventListener('click', () => {
divEl.remove();
});✅ remove() 메서드를 사용하여 해당 리스트 항목을 삭제
5️⃣ 생성한 요소를 리스트 컨테이너에 추가
divEl.appendChild(textEl);
divEl.appendChild(deleteBtn);
containerEl.appendChild(divEl);✅ 리스트 항목을 조합하여 <div class="container">에 추가
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| 새로운 요소 생성 | document.createElement() 사용 |
| 요소 추가 | appendChild() 사용 |
| 요소 삭제 | remove() 사용 |
| 이벤트 리스너 추가 | addEventListener('click', callback) 사용 |
Here, My Pale Blue.🌏