removeChild 오류
조회수 2605회
<!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 답변
-
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>
댓글 입력