removeChild 오류

Question

removeChild 오류

조회수 2607회

javascript

-1

싫어요

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">   
<meta charset="EUC-KR">
<title>MyPlayList</title>
<script>    
    function addSong() {
        var inputSong = document.getElementById("inputSong");

        var text = document.createElement("span");
        text.innerHTML = inputSong.value;

                // 똑같은 코드 사용!!
        var addBtn = document.createElement("input");
        addBtn.setAttribute("type", "button"); // 버튼으로 설정
        addBtn.setAttribute("value", "삭제"); // 버튼의 value=삭제
        addBtn.setAttribute("style", "margin-left:5px"); // 왼쪽에서 5px 미룸
        addBtn.onclick = function() {
            var ol = document.getElementById("playlist");
            ol.removeChild(this.parentNode);
            alert("(" + this.parentNode.id + ") 노래 삭제");
        }

        var addli = document.createElement("li");
        addli.setAttribute("id", inputSong.value); // id를 input.value로 설정
        addli.appendChild(text);
        addli.appendChild(addBtn);

        var ol = document.getElementById("playlist");
        ol.appendChild(addli);
    }

    function deleteList() {
        var ol = document.getElementById("playlist");
        ol.removeChild(this.parentNode);
        //alert("(" + this.parentNode.id + ") 노래 삭제");
    }
</script>
</head>
<body>
    <input id="inputSong" type="text" value="">
    <input type="button" value="노래 추가" onclick="addSong();">
    <ol id="playlist">
        <li>1 <input type="button" value="삭제" style="margin-left:5px" onclick="alert('hi!')"></li>
        <li>2 <input type="button" value="삭제" style="margin-left:5px" onclick="deleteList();"></li>
        <li>3 <input type="button" value="삭제" style="margin-left:5px" onclick="deleteList();"></li>
    </ol>
</body>
</html>

body태그의 자식 ol태그의 자식인 li의 태그를 삭제 하기 위해서 deletList() 함수를 선언하였는데요 삭제 버튼을 누르면 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. 이런 오류가 뜨면서 작동하지 않습니다 addSong()의 주석 똑같은 코드 사용!! 부분을 보시면 li 태그를 삭제할 때 똑같은 코드를 사용했는데 오류 안뜨고 정상적으로 작동합니다.. 왜 body 태그의 삭제 버튼을 누르면 오류가 발생하는 것인가요? 도와주세요..

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 1 · Accepted Answer

addBtn.onclick 에서 this.parentNode가 작동하는 이유는, 거기서의 this가 addBtn이기 때문입니다. 그리고 deleteList() 함수 안에서 this는 window 객체일 겁니다. li 엘리먼트 하나를 클릭했을 때 실행되는 것은 사실은 window.deleteList()거든요. 그러니 아마 this.parentNode = window.parentNode = (undefined)일 거고 당연히 실행 안될겁니다. 코드를 그대로 카피해서 사용하는 게 중요한 게 아니고, 복사하려는 코드가 갖고 있는 그 구성 그대로가 복사된 코드에도 적용돼 있느냐가 중요해요.

현재의 설계하에서 문제를 해결하려면 제생각에는 deleteList() 함수가 인자를 받아야 할 거 같네요. 사실 지금 만들고 계신 것이 재생목록 실행기이기 때문에 사실은 전역적으로 관리되는 재생 대상의 객체의 배열이 관리되는 방식이 돼야 할 거 같지만 아무튼...

아래와 같이 고쳤을 때 기대한 대로 작동하는지 확인해 보세요.

// 코드 자체가 범용적이므로 함수명을 고침.
// 어떤 DOMElement 를 주면, 그 엘리먼트의 바로 위 부모를 DOM에서 삭제한다.
function deleteParent(element) {
    var parent = element.parentNode;
    parent.remove();
}

<!-- 여기서의 this 는 맥락적으로 input 엘리먼트가 되고 따라서 잘 실행됨 -->
<li>2 <input onclick="deleteParent(this);"></li>