[Javascript] IE10, remove 함수 사용 불가 이슈

안녕하세요. 글쓰는 개발자입니다.

글을 쓰는 시점은

야근을 마치고 돌아오자마자 새벽 1시가 좀 넘었는데요.

단위테스트를 진행하면서 Chrome에서는

잘되던 javascript remove() 함수가 IE10에서는 사용불가한 이슈가 있었습니다.

그렇다면, 예제와 해결 방법을 알려드리겠습니다.

 

---

테스트용으로

리스트를 만들었고

remove() 함수를 먼저 적용해보았습니다.

Chrome에서는 잘되었지만, IE10에서는 아래 그림과 같은 에러를 확인할 수 있었습니다.

IE remove 에러 콘솔

 

그러나, removeTestIE10() 을 보시면,

삭제하고자하는 node의 parent를 선언하고,

var test = paren.document.getElementById("test1");

removeChild(test)

의 방식으로 해결했습니다.

<ul>
  <li id="test1">테스트1</li>
  <li id="test2">테스트2</li>
  <li id="test3">테스트3</li>
</ul>

<button type="button" onclick="removeTest()">remove</button>
<button type="button" onclick="removeTestIE10()">removeIE10</button>

<script>

  //기존 function
  function removeTest(){

    var test = document.getElementById("test1");
    test.remove();

  }

  //IE10 function
  function removeTestIE10(){

    var test = parent.document.getElementById("test1");
    test.removeChild(test);

  }

</script>

 

사실, JQUERY를 사용하면, 문제가 없었는데

이 코드를 작성할 때 하필, pure javascript에 대한 칼럼을 읽은터라

이런 이슈를 생각 못해서 시간을 잡아먹었습니다.

프로젝트를 진행하면서,

안드로이드, iOS, Chrome, IE, Safari등 다양한 브라우저와 OS에서

실행을 하는데, 웹개발은 고려사항이 정말 많구나 하는 것을 다시 한 번 느꼈습니다.

 

선배 웹개발자분들 존경합니다!