노드를 삭제하고 하위 node_javascript 기술을 삭제하는 Javascript RemoveChild() 메소드

Javascript RemoveChild()를 사용하여 노드를 삭제하는 방법을 소개합니다.

Javascript에는 노드를 삭제하는 방법이 하나뿐입니다:removeChild().

removeChild() 메소드는 상위 노드의 하위 노드를 삭제하는 데 사용됩니다.

문법:

parent.removeChild(thisNode)

매개변수 설명:

예를 들어 id="demo"인 노드를 삭제하는 명령문은 다음과 같습니다.

var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);

예를 들어 노드 삭제:

<div id="demo">
  <div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
  this.parentNode.removeChild(this);
}
</script>

시연 예:

Javascript는 노드를 삭제하는 방법을 하나만 제공하지만 그것만으로도 충분하다는 것을 알 수 있습니다.

ps: 하위 노드를 삭제하는 JavaScript 메소드

HTML 코드는 다음과 같습니다.

<div id="f"> 
 <div>a</div> 
 <div>b</div> 
 <div>c</div> 
</div> 

f 노드 아래의 모든 하위 노드를 삭제하려면 다음과 같은 코드가 자연스럽고 일반적인 방법으로 생각되어야 합니다.

var f = document.getElementById("f"); 
var childs = f.childNodes; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 

프로그램을 실행해보니 FireFox든 IE든 모든 하위 노드를 완전히 삭제할 수 없는 것을 발견했습니다(FireFox에서도 빈 영역이 삭제되었습니다
노드이기 때문에 노드 삭제 결과가 달라집니다), 인덱스가 0인 자식 노드를 삭제하면 원래 인덱스가 삭제되는 것이 당연하기 때문입니다
이때 1이었던 노드의 인덱스는 0이 되고, 이때 변수 i는 1이 ​​된다. 프로그램을 계속 진행하면 원래 인덱스가 2였던 노드를 삭제하게 되어 이제는 1이 된다. 즉, 프로그램을 실행한 결과는 자식 노드 중 절반에 대해 for in을 사용하여 순회한 결과는 동일합니다. 모든 노드를 정상적으로 삭제하고 싶습니다
그렇다면 뒤에서 앞으로 삭제해야 하는데, 코드는 다음과 같습니다.

for(var i = childs.length - 1; i >= 0; i--) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 

인덱스가 이동하거나 변경되지 않도록 감소 방식을 사용하여 최대 인덱스 값부터 삭제를 시작합니다.