참가 신청 명단에 이름을 추가하면 위에서 부터 추가된. 노드리스트를 사용하여 만들었고 삭제하는 함수도 만들었다.
1. 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="css/nameList.css">
</head>
<body>
<div id="container">
<h1>참가 신청</h1>
<form >
<input type="text" id="userName" placeholder="이름" required autocomplete="off">
<button id="userButton">신청</button>
</form>
<hr>
<div id="nameList"></div>
</div>
<script src="js/register-result.js"></script>
</body>
</html>2. 클릭 후 노드 추가 자바스크립트
버튼.addEventListener('click', function(){
if(입력.value != null){
var p = document.createElement('p');
네임리스트.appendChild(p);
p.textContent = 입력.value;
var span = document.createElement('span');
p.appendChild(span);
span.textContent = 'X';
span.setAttribute('class', 'num');
입력.value ='';
입력.focus();
네임리스트.insertBefore(p, 네임리스트.childNodes[0]);
}
삭제();
});
addEventListener을 이용하여 클릭 이벤트를 만들어 주었고 if문에는 입력칸이 비워져 있으면 노드들을 추가한다. setAttribute을 사용하여 class을 만들어 주었다. 그리고 insertBefore을 이용하여 노드를 앞에 추가하는 메소드를 사용하였다.
사용 메소드
- insertBefore 노드를 앞에 추가시키는 메소드
3. 삭제 코드
function 삭제(){
var 클래스 = document.querySelectorAll('.num');
for(var i=0; i<클래스.length; i++){
클래스[i].addEventListener('click', function(){
console.log(this);
if(this.parentNode.parentNode){
this.parentNode.parentNode.removeChild(this.parentNode);
}
})
}
};삭제코드는 전에 만들었던 준비물 리스트를 삭제하던 코드와 동일하다. removeChild을 통해 부모 노드 까지 삭제 시켜준다.
4. 전체 코드
var 입력 = document.querySelector('#userName');
var 버튼 = document.querySelector('#userButton');
var 네임리스트 = document.querySelector('#nameList')
function 삭제(){
var 클래스 = document.querySelectorAll('.num');
for(var i=0; i<클래스.length; i++){
클래스[i].addEventListener('click', function(){
console.log(this);
if(this.parentNode.parentNode){
this.parentNode.parentNode.removeChild(this.parentNode);
}
})
}
};
버튼.addEventListener('click', function(){
if(입력.value != null){
var p = document.createElement('p');
네임리스트.appendChild(p);
p.textContent = 입력.value;
var span = document.createElement('span');
p.appendChild(span);
span.textContent = 'X';
span.setAttribute('class', 'num');
입력.value ='';
입력.focus();
네임리스트.insertBefore(p, 네임리스트.childNodes[0]);
}
삭제();
});