HTML DOM removeChild() 메서드
예시
목록에서 첫 번째 <li> 요소를 제거합니다.
var list = document.getElementById("myList"); // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)
제거하기 전에:
- 커피
- 차
- 우유
제거 후:
- 차
- 우유
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
removeChild() 메서드는 지정된 요소의 지정된 자식 노드를 제거합니다.
제거된 노드를 Node 개체로 반환하거나 노드가 없으면 null 을 반환합니다.
참고: 제거된 자식 노드는 더 이상 DOM의 일부가 아닙니다. 그러나 이 메서드에서 반환된 참조를 사용하면 나중에 제거된 자식을 요소에 삽입할 수 있습니다("추가 예제" 참조).
팁: 제거된 노드를 동일한 문서에 삽입하려면 appendChild() 또는 insertBefore() 메소드 를 사용 하십시오 . 다른 문서에 삽입하려면 document.adoptNode() 또는 document.importNode() 메서드를 사용합니다.
브라우저 지원
| Method | |||||
|---|---|---|---|---|---|
| removeChild() | Yes | Yes | Yes | Yes | Yes |
통사론
node.removeChild(node)
매개변수 값
| Parameter | Type | Description |
|---|---|---|
| node | Node object | Required. The node object you want to remove |
기술적 세부 사항
| 반환 값: | 제거된 노드를 나타내는 Node 객체 또는 노드가 존재하지 않는 경우 null |
|---|---|
| DOM 버전 | 코어 레벨 1 노드 개체 |
더 많은 예
예시
목록에 자식 노드가 있는지 확인합니다. 그렇다면 첫 번째 자식 노드(인덱스 0)를 제거합니다.
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}
제거하기 전에:
- Coffee
- Tea
- Milk
제거 후:
- Tea
- Milk
예시
목록의 모든 자식 노드를 제거합니다.
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
제거하기 전에:
- Coffee
- Tea
- Milk
제거 후:
예시
상위 요소에서 id="myLI"인 <li> 요소를 제거합니다(상위 노드를 지정하지 않음).
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
제거하기 전에:
- Coffee
- Tea
- Milk
제거 후:
- Coffee
- Milk
예시
상위 요소에서 <li> 요소를 제거하고 다시 삽입합니다.
var item = document.getElementById("myLI");
function removeLi() {
item.parentNode.removeChild(item);
}
function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}
예시
상위 요소에서 <span> 요소를 제거하고 다른 문서의 <h1> 요소에 삽입합니다.
var child = document.getElementById("mySpan");
function removeLi() {
child.parentNode.removeChild(child);
}
function myFunction() {
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(child);
h.appendChild(x);
}