본문 바로가기

Dev.Project/Todolist_project

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




Step 10. 삭제 버튼 구현하기


그러고보니 더블 클릭을 이동으로 변경하고 삭제하기를 할 수 있는 버튼을 만들지 않았다.
한 번 복습한다고 해보자.
className을 통해 font-awesome을 이용하고,
id 값을 설정해주고,
appendChild를 통해 출력해준다.

main.js code>
1
2
3
4
5
6
var minusIcon = document.createElement('i');
minusIcon.className = 'fa fa-minus';
minusIcon.id = 'minusIcon_' + id;
minusIcon.onclick = deleteItem;
 
listItem.appendChild(minusIcon);
cs

수정 아이콘(연필 아이콘)처럼 마우스가 over 되었을 때만 나타나게 하기 위해,
css default 값을 hidden 으로 해주고,
삭제하는 거라 추가적으로 붉은색을 추가했다.

style.css code>
1
2
3
4
5
6
7
.fa-minus{
    float:right;
    padding: 5px;
    visibility: hidden;
    color: #F2143F;
}
cs

deleteItem을 재설정해준다.(removeItem 함수를 move 함수와 rename 함수와 헷갈려서 함수명을 바꿨다.)
main.js code>
1
2
3
4
5
function deleteItem(donelist){
  //this === minusIcon
  var listItemId = this.id.replace('minusIcon_''');
  document.getElementById('li_' + listItemId).style.display = "none";
cs



- Step 10. The end -


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