removeChild 오류

조회수 72회
<!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 태그의 삭제 버튼을 누르면 오류가 발생하는 것인가요? 도와주세요..

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    addBtn.onclick 에서 this.parentNode가 작동하는 이유는, 거기서의 thisaddBtn이기 때문입니다. 그리고 deleteList() 함수 안에서 thiswindow 객체일 겁니다. 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>
    
    • 아 덕분에 오류 해결했네요 제가 html 사용한지 얼마 안된 초보라서.. 많이 부족합니다 정말 감사합니다!! Lee Yesung 2020.10.12 20:13

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.