ES6 자바스크립트로 DOM에서 요소를 간단히 제거하는 방법

ES6 자바스크립트를 사용하면 DOM에서 요소를 아주 쉽게 제거할 수 있습니다. 제거하고 싶은 요소에 remove() 메서드만 붙여주면 됩니다.

let element = document.querySelector("element-to-remove")
element.remove()

예를 들어 웹 페이지에서 h1 요소를 제거하고 싶다면 다음과 같이 작성합니다.

let headingOne = document.querySelector("h1")
headingOne.remove()

브라우저 호환성

remove() 메서드는 Edge를 포함한 모든 최신 브라우저(Chrome, Firefox, Safari, Opera 등)에서 지원됩니다. 다만 Internet Explorer는 IE11을 포함해 어떤 버전에서도 호환되지 않으므로, 구형 브라우저 지원이 필요하다면 parentNode.removeChild() 방식을 대안으로 고려해야 합니다.

// IE 대응이 필요한 경우의 대체 방법
let element = document.querySelector("h1")
element.parentNode.removeChild(element)

출처: Caniuse.com