保留中の追加、削除機能の追加

    <script>
        var dataJSON = '';
        var output = document.getElementById('output');
        var todoList = document.querySelector('#todoList');

        // 페이지 시작시 세션에 todolist가 저장되어 있으면 가져와서 dataJSON에 저장하고
        // 없으면 초기 제이슨 문자열로 초기값을 입력한다.
        window.onload = function () {
            if (sessionStorage['todolist'] != null) {
                dataJSON = JSON.parse(sessionStorage['todolist']);
            }
            else {
                var data = '[{"todo":"커피마시기","status":false},{"todo":"청소하기","status":false},{"todo":"운동하기","status":false},{"todo":"요리하기","status":false}]';
                dataJSON = JSON.parse(data);
            }
            buildCheckboxes(dataJSON); //매개변수로 JSON 객체를 입력
        }

        // 이벤트 리스너로 이벤트('submit' 버튼 클릭시) 처리 방법
        document.getElementById('myForm').addEventListener('submit', function (e) {
            e.preventDefault(); //서버로 전송하는 본래기능 제거
            var tempValue = document.querySelector('input[name="todo"]').value;
            addNewItem({
                "todo": tempValue
                , "status": false
            })
        })
        // 입력된 입력창의 내용(할일)을 제이슨데이터에 추가
        function addNewItem(data) {
            addCheckbox(data, dataJSON.length);
            dataJSON.push(data);
            sessionStorage['todolist'] = JSON.stringify(dataJSON);
        }
        // 할일 리스트와 체크박스를 만들어 표시
        function addCheckbox(data, key) {
            var li = document.createElement('li');
            var checkbox = document.createElement('input')
            var textInside = document.createTextNode(data.todo);
            var span = document.createElement('span');
            span.innerHTML = 'x';
            span.onclick = remove;
            checkbox.type = 'checkbox';
            checkbox.value = key;
            checkbox.checked = data.status;
            checkbox.setAttribute('onchange', 'updateJSON()');
            li.appendChild(textInside);
            li.appendChild(checkbox);
            li.appendChild(span);
            document.querySelector('#todoList').appendChild(li);
        }
        // 제이슨데이터에서 할일 제거한후 새로 리스트 생성하기
        function remove() {
            var index = this.previousElementSibling.value;
            console.log(index);
            todoList.innerHTML = ''; //리스트를 공백으로 없애기
            dataJSON.splice(index, 1) //인덱스번호에 해당하는 할일을 삭제한다.
            buildCheckboxes(dataJSON) //새 리스트 출력
            sessionStorage['todolist'] = JSON.stringify(dataJSON);
        }
        //데이터 배열에 있는 모든 할일을 순서대로 리스트로 화면에 출력
        function buildCheckboxes(data) {
            for (var key in data) {
                addCheckbox(data[key], key)
            }
        }   


        function updateJSON() {
            //console.log(e.target);
            var key = event.target.value; //이벤트(즉 클릭된 li객체) 객체의 value속성
            dataJSON[key].status = event.target.checked; //체크박스의 상태
            sessionStorage['todolist'] = JSON.stringify(dataJSON);
        }
    </script>