-
JavaScript 노드 제거프로그래밍/JavaScript 2022. 10. 9. 18:04728x90
특정 노드를 제거하기 위해서는 removeChild()를 사용한다. removeChild()는 자식 노드 리스트에서 특정 자식 노드를 제거하고 성공적으로 노드가 제거되면 제거된 노드를 반환할 수 있다. 노드가 제거 될 때 노드의 모든 자식들도 다 같이 제거한다. removeAttribute()는 노드의 속성을 제거할 때 사용된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>노드 제거</title> </head> <body> <div id="list"> <p>HTML</p> <p id="item">CSS</p> <p id="js" style="background-color: gold; color: deeppink;">JavaScript</p> <p>TypeScript</p> </div> <button onclick="removeNode()">요소 노드 삭제</button> <button onclick="removeAttr()">속성 노드 삭제</button> <script> 'use strict'; function removeNode(){ const parent = document.getElementById('list'); const removeItem = document.getElementById('item'); const result = parent.removeChild(removeItem); // id='item'인 p태그 지우기 console.log(result); } function removeAttr(){ const js = document.getElementById('js'); js.removeAttribute('style'); // style 속성을 지우기 } </script> </body> </html>
기본 상태 
요소 노드 삭제 버튼을 누른 경우 
속성 노드 삭제 버튼을 누른 경우 728x90'프로그래밍 > JavaScript' 카테고리의 다른 글
JavaScript 폼객체 (0) 2022.10.11 JavaScript 노드 복제 (0) 2022.10.10 JavaScript 노드 연결 & 노드 생성 (0) 2022.10.08 JavaScript 문서 모델 객체(Document Object Model) (0) 2022.10.07 JavaScript BOM(Brower Object Model)_2 (0) 2022.10.06