register.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM - Create & Add Node</title>
<link rel="stylesheet" href="./nameList.css">
</head>
<body>
<div id="container">
<h1>리스트 추가 예제</h1>
<form action="">
<input type="text" id="userName" placeholder="리스트" required>
<button onclick="newRegister(); return false;">추가</button>
</form>
<hr>
<div id="nameList"></div>
</div>
<script src="./register.js"></script>
</body>
</html>
register.js
function newRegister() {
var newP = document.createElement("p");
var userName = document.querySelector("#userName");
var newText = document.createTextNode(userName.value);
newP.appendChild(newText);
// <span class = "del">X</span> 추가하기
var delBtn = document.createElement("span");
var delText = document.createTextNode("X");
delBtn.setAttribute("class", "del");
delBtn.appendChild(delText);
newP.appendChild(delBtn);
var nameList = document.querySelector("#nameList");
nameList.insertBefore(newP, nameList.childNodes[0]); // #nameList 맨 앞에 newP를 추가
userName.value = "";
// X버튼을 눌렀을 때 해당 리스트를 삭제하는 함수
var removeBtns = document.querySelectorAll(".del");
for (var i=0; i<removeBtns.length; i++) {
removeBtns[i].addEventListener("click", function() {
// 현재 노드(this)의 부모 노드의 부모 노드가 있을 경우 실행
if (this.parentNode.parentNode)
this.parentNode.parentNode.removeChild(this.parentNode);
// 현재 노드(this)의 부모 노드의 부모 노드를 찾아 현재 노드(this)의 부모 노드(p 노드) 삭제
});
}
}
register.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;
}
728x90
반응형
'Language > Javascript' 카테고리의 다른 글
| 자바스크립트) 체크리스트 만들기 (0) | 2022.01.05 |
|---|
