[Todolist_Basic] Step 10. 삭제 버튼 구현하기

Step 10. 삭제 버튼 구현하기

그러고보니 더블 클릭을 이동으로 변경하고 삭제하기를 할 수 있는 버튼을 만들지 않았다.

한 번 복습한다고 해보자.

className을 통해 font-awesome을 이용하고,

id 값을 설정해주고,

appendChild를 통해 출력해준다.

main.js code>

var minusIcon = document.createElement('i');
minusIcon.className = 'fa fa-minus';
minusIcon.id = 'minusIcon_' + id;
minusIcon.onclick = deleteItem;
 
listItem.appendChild(minusIcon);

수정 아이콘(연필 아이콘)처럼 마우스가 over 되었을 때만 나타나게 하기 위해,

css default 값을 hidden 으로 해주고,

삭제하는 거라 추가적으로 붉은색을 추가했다.

style.css code>

.fa-minus{
    float:right;
    padding: 5px;
    visibility: hidden;
    color: #F2143F;
}

deleteItem을 재설정해준다.(removeItem 함수를 move 함수와 rename 함수와 헷갈려서 함수명을 바꿨다.)

main.js code>

function deleteItem(donelist){
  //this === minusIcon
  var listItemId = this.id.replace('minusIcon_', '');
  document.getElementById('li_' + listItemId).style.display = "none";
} 

- Step 10. The end -

 Final Step. 스타일링하기 [이동]