요소를 제거하는 방법으로 innerHTML, remove()와 removeChild()가 있습니다.
아래 예시 코드로 정리해보겠습니다.
<body>
<header><h1 id="main-title">Dive into the DOM!</h1></header>
<section class="red-bg">
<ul>
<li class="list-item">Item1</li>
<li class="list-item">Item2</li>
<li class="list-item">Item3</li>
</ul>
</section>
<button>Toggle Visibility</button>
<div>
<input id="input-1" class="input-default" value="Enter text..." />
</div>
</body><ul> 요소 노드를 제거해야 하는 상황입니다.
innerHTML
const list = document.querySelector("ul");
list.innerHTML = "";제거하고 싶은 요소 노드의 부모 노드에 접근하여 innerHTML를 사용하여 요소 노드 안의 노드를 빈 문자열인 텍스트 노드로 변경합니다.
remove()
const list = document.querySelector("ul");
list.remove(); // DOM에서 <ul> 요소 노드를 제거합니다.제거하고 싶은 요소 노드에 접근하여 바로 remove()를 사용하시면 됩니다.
이 방법은 Internet Explorer 브라우저에서 지원하지 않기 때문에 참고하셔서 사용하셔야 합니다.
removeChild()
Internet Explorer에서도 지원하는 요소 제거 방법입니다.
const list = document.querySelector("ul");
list.parentElement.removeChild(list); // 삭제하고 싶은 요소의 부모 노드에 접근하여 자식을 제거삭제하고 싶은 요소 노드의 부모 요소 노드에 접근하여 removeChild()를 사용하고, 인자로는 제거하고 싶은 요소 노드를 받으시면 됩니다.
'JavaScript' 카테고리의 다른 글
| 배열에 요소 추가 & 제거하기 (0) | 2022.09.04 |
|---|---|
| 배열(Array) 생성 (0) | 2022.09.04 |
| 요소 생성과 요소 삽입 (0) | 2022.08.28 |
| classList (0) | 2022.08.28 |
| DOM 트래버싱(Traversing the DOM) (0) | 2022.08.25 |
