example_07

by this_mong

HTML

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

CSS

* {
  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;
}

JavaScript

var itemList = [];

var addBtn = document.querySelector("#add");
addBtn.addEventListener("click",addList);

function addList(){
	var item = document.querySelector("#item").value;
	if (item != null)
	{
		itemList.push(item);
		document.querySelector("#item").value="";
		// id = "item" 요소 값을 지움
		document.querySelector("#item").focus();
		// 배열에서 추가한 내용을 텍스트 필드에서 자동으로 지우고 다시 커서를 활성화하는 기능
	}
	showList();
}

function showList(){
	var list = "<ul>";
	for (var i=0;i<itemList.length; i++ )
	{
		list+="<li>"+itemList[i]+"<span class='close' id="+i+">X</span></li>";
	}
	list+="</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(){
	//console.log(this);
	var id = this.getAttribute("id");
	itemList.splice(id,1); // itemList 배열에서 인덱스 값이 id인 요소 1개 삭제
	showList(); // 변경된 itemList 배열을 다시 화면에 표시
}