<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>여행 준비물 점검 목록</title>
</head>
<body>
  <div id="wrapper">
    <h2>여행 준비물 점검 목록</h2>
    <form>
      <input type="text" id="item" autofocus="true">
      <button type="button" id="add" class="addBtn">추가</button>
    </form>
    <div id="itemList"></div>
  </div>    
  
  </html>
* {
  box-sizing:border-box;
}
#wrapper {
  width:600px;
  margin:0 auto;
}
h2 {
  text-align:center;
}
form {
  background-color:#007acc;
  padding:30px 40px;
  color:white;
  text-align:center;
}
input {
  border:none; 
  width:440px;
  padding:10px;
  float:left;
  font-size:16px;
}
.addBtn {
  padding:10px;
  width:50px;
  border:none;
  background-color:#fff;
  box-shadow:1px 2px 4px #167dae;
  color:#555; 
  text-align:center;
  font-size:14px;
  cursor:pointer;
  transition:0.3;
}
form::after {
  content:"";
  display:table;
  clear:both;
}

form::after {
  content:"";
  display:table;
  clear:both;
}
ul{
  margin:0;
  padding:0;
  list-style: none;
}
ul li{
  cursor:pointer;
  position:relative;
  padding:12px 8px 12px 40px;
  background: #eee;
  font-size:18px;
  transition: 0.2s;
}
ul li:nth-child(odd) {
  background-color:#f9f9f9;
}
ul li:hover {
  background-color:#ddd;
}
.close {
  position:absolute;
  right:0;
  top:0;
  padding:12px 16px;
  border:none;
  background:rgba(255,255,255,0)
}
.close:hover {
  background-color:#007acc;
  color:white;
}
    var itemList = [];
    
    var addBtn = document.querySelector("#add");
    addBtn.addEventListener("click", addList); // addBtn.onclick = addList; 라고 해도 됨
    
    function addList() {
      var item = document.querySelector("#item").value;  // 텍스트 필드 내용 가져옴
      if (item != null) {
        itemList.push(item);  // itemList 배열의 끝에 item 변수 값 추가
        document.querySelector("#item").value = "";  // id=”item”인 요소의 값을 지움
        document.querySelector("#item").focus();  // 텍스트 필드에 focus( ) 메서드 적용
      }
      showList();
    }
    
    function showList() {
      var list = "<ul>";  // 목록을 시작하는 <ul> 태그 저장
      for (var i=0; i<itemList.length; i++) {  // 배열 요소마다 반복 
        list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>";  // 요소와 삭제 버튼을 <li>~</li>로 묶음
      }
      list += "</ul>";   // 목록을 끝내는 </ul> 태그 저장
      
      document.querySelector('#itemList').innerHTML = list;  // list 내용 표시
      
      var remove = document.querySelectorAll(".close");  // 삭제 버튼을 변수로 저장. 배열 형태가 됨
      for(var i = 0; i < remove.length; i++) {  // remove 배열의 요소 모두를 확인
        remove[i].addEventListener("click", removeList);  // 요소를 클릭하면 removeList() 실행
      }
    }
    
    function removeList() {
      var id = this.getAttribute("id"); // this(클릭한 삭제 버튼)의 id 값 가져와 id 변수에 저장
      itemList.splice(id, 1);  // itemList 배열에서 인덱스 값이 id인 요소 1개 삭제
      showList();  // 변경된 itemList 배열을 다시 화면에 표시
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.