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 |
|---|
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 |
|---|
