이번 장에서는 지금까지 구현한 목록에 등록과 삭제 기능을 구현해보자. 순서는 다음 그림과 같다.

▲ 그림 5-1 주소록 등록/삭제 구현 순서

 

삭제는 각 목록의 끝에 삭제 버튼을 만들어서 버튼을 클릭했을 때 해당 <tr>에 해당하는 데이터가 목록에서 삭제되는 형태로 구현한다. 등록은 각 항목을 입력받아 저장하는 별도의 템플릿을 목록 상단에 구현하는 방식으로 하겠다.