<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/nameList.css">
</head>
<body>
<div id="container">
<h1>참가 신청</h1>
<form action="">
<input type="text" id="userName" placeholder="이름" required>
<button>신청</button>
</form>
<hr>
<div id="nameList"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
/* 참가 신청 명단 프로그램 만들기
1. 새 노드 추가하고 표시하기
*/
const btn = document.querySelector('button');
btn.addEventListener('click', function(e) {
e.preventDefault(); // submit 방지
// console.log(document.querySelector('#userName').value);
let item = document.createElement('p'); // 새 p요소 만들기
let userName = document.querySelector('#userName');
item.textContent = userName.value;
// 2. 삭제 버튼 관련 생성 및 이벤트 추가
let delItem = document.createElement('span'); // 새 button 요소 만들기
delItem.textContent = 'x' // 새 텍스트 노드 만들기
delItem.setAttribute('class', 'del'); // 버튼에 class 속성을 del로 정함
delItem.addEventListener('click', function() {
// alert('11');
this.parentNode.parentNode.removeChild(this.parentNode);
// this 즉 span의 부모요소(p)의 부모요소(nameList)의 자식요소(p)를 제거
})
item.appendChild(delItem); // del 버튼을 P요소의 자식 요소로
let nameList = document.querySelector("#nameList");
// nameList.appendChild(item); // p 요소를 #nameListdml 자식 요소로 만들기
nameList.insertBefore(item, nameList.childNodes[0]); // p요소를 #nameList 맨 앞에 추가하기
userName.value = ''; // 텍스트 필드 지우기
});
});
</script>
</body>
</html>css파일
#container {
width:500px;
margin:20px auto;
}
h1 {
font-size:2.5em;
text-align: center
}
form {
margin-top:50px;
}
input[type="text"] {
float:left;
width:300px;
padding:12px;
border:none;
border-bottom:1px solid #ccc;
font-size:20px;
}
input:focus {
outline: none;
}
button {
width:100px;
border:1px solid #ccc;
border-radius:7px;
padding:12px;
margin-left:30px;
font-size:20px;
}
button:hover {
background-color:#ccc;
}
hr {
clear:both;
visibility: hidden;
}
#nameList > p {
font-size:20px;
text-indent:50px;
line-height: 1.5;
}
.del {
font-size:20px;
text-align: center;
color:#ccc;
background:transparent;
float:right;
margin-right:10px;
}
.del:hover {
color:#222;
cursor: pointer;
}
.del:active {
outline:0;
}
