JavaScript의 RemoveChild() 함수 사용법_javascript 기술에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript의 RemoveChild() 함수 사용법_javascript 기술에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:23:09

원래의

1721명이 탐색했습니다.

removechild 함수는 상위 요소의 지정된 하위 요소를 삭제할 수 있습니다.

이 함수가 하위 노드를 성공적으로 삭제하면 삭제된 노드를 반환하고, 그렇지 않으면 null을 반환합니다.

문법 구조:

fatherObj.removeChild(childrenObj)

매개변수 설명:

1.fatherObj: 삭제할 하위 요소의 요소 개체입니다.
2.childrenObj: 삭제할 하위 요소 개체입니다.

특별 지침:

Firefox, Google 및 IE8 이상의 브라우저에서는 공백도 텍스트 노드로 간주되지만, IE8 및 IE8 이하의 브라우저에서는 빈 텍스트 노드가 무시됩니다. 자세한 내용은 하위 노드 가져오기 방법을 참조하세요. JavaScript 장의 요소의 상위 노드.

코드 예:

예 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var lis=obox.getElementsByTagName("li");
 obox.removeChild(lis[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>脚本之家一</li>
 <li>脚本之家二</li>
 <li>脚本之家三</li>
 <li>脚本之家四</li>
</ul>
</body>
</html>

로그인 후 복사

위 코드는 box의 하위 요소에서 두 번째 li 요소를 삭제할 수 있습니다.

예 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var liArray=[];
 var y=0;
 var childNodes=obox.childNodes;
 for(var i=0;i<childNodes.length;i++){
  if(childNodes[i].nodeType==1){
   liArray[y]=childNodes[i];
   y=y+1;
  }
 }
 obox.removeChild(liArray[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>脚本之家一</li>
 <li>脚本之家二</li>
 <li>脚本之家三</li>
 <li>脚本之家四</li>
</ul>
</body>
</html>

로그인 후 복사

위 코드는 상자의 모든 하위 노드에서 요소 노드를 선택한 다음 요소 노드를 배열에 넣은 다음 두 번째 요소 노드를 삭제할 수 있습니다.

요약:

removeChild()

해당 요소의 상위 요소를 가져와서 삭제하는 함수입니다. 구문은 다음과 같습니다: parent.removeChild(child);

때로는 상위 요소를 건드리지 않고 삭제하고 싶을 때가 있습니다. 그러나 DOM은 이러한 메커니즘이므로 삭제를 수행하기 전에 요소와 상위 요소가 명확해야 합니다. 삭제할 요소를 입력할 때 삭제 작업을 수행하고 해당 parentNode 속성을 사용하여 상위 요소를 찾을 수도 있습니다.

var child=document.getElementById(p1);
child.parentNode.removeChild(child);

로그인 후 복사

참고: jquery에는 RemoveChild에 해당하는 함수(remove() 및empty())도 있습니다.

remove(): 자신과 하위 요소를 모두 삭제하는 것을 의미합니다

empty(): 하위 요소를 삭제합니다