주석 : 모든 노드는 JavaScript를 통해 삭제할 수 있습니다. 이 기사는 주로 RemoveChild 기능에 대해 설명합니다. 다음 예제를 살펴볼 수 있습니다
div에 무언가가 있다고 가정 해 봅시다 :<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = gbk">
<title> iscroll 데모 : 단순 </title>
<script type = "text/javaScript">
함수 deletedata () {
}
</스크립트>
<스타일 유형 = "text/css"media = "all">
몸, ul, Li {
패딩 : 0;
여백 : 0;
국경 : 0;
}
몸 {
글꼴 크기 : 12px;
-webkit-user select : 없음;
-webkit- 텍스트 크기 조정 : 없음;
Font-Family : Helvetica;
}
</스타일>
</head>
<body>
<div> <입력 유형 = "제출"값 = "Li 노드 삭제" /> < /div>
<div>
<ul>
<li> 예쁜 행 1 </li>
<li> 예쁜 행 2 </li>
<li> 예쁜 행 3 </li>
<li> 예쁜 행 4 </li>
<li> 예쁜 행 5 </li>
<li> 예쁜 행 6 </li>
<li> 예쁜 행 7 </li>
<li> 예쁜 행 8 </li>
<li> 예쁜 행 9 </li>
<li> 예쁜 행 10 </li>
<li> 예쁜 행 40 </li>
</ul>
</div>
</body>
</html>
이제 JavaScript의 기능을 통해 그들을 지우십시오.
코드의 한 문장을 통해 직접 구현할 수 있지만 :
document.getElementById (content) .innerhtml =
그러나이 기사는 주로 제거 기능에 대해 설명합니다.
다음 코드의 도움으로 수행 할 수 있다고 당연한 것으로 여겼습니다.
함수 deletedata () {
var el = document.getElementById ( 'thelist');
var linodes = document.getElementsByTagName ( "li");
경고 (linodes.length);
for (var i = 0; i <linodes.length; i ++) {
경고 ( "삭제"+I+"Linodes [i] ="+Linodes [i]);
el.RemoveChild (Linodes [i]);
// <- el.removeChild (Linodes [i]);
}
}
예기치 않게 버튼을 클릭 한 후, 1, 3, 5만이 지우고 2, 4, 6은 사라지지 않았습니다.
문제는 처음부터 발생했습니다.
첫 번째 노드를 삭제 한 후 후속 노드의 순서가 변경되었습니다. 원래 두 번째 노드가 앞으로 이동하여 새로운 첫 번째 노드가됩니다. 원래 세 번째 노드는 두 번째 노드가됩니다 ...
따라서 다음 단계는 두 번째 노드를 삭제하는 것이었지만 가장 원래의 세 번째 노드는 삭제되었습니다.
결국, 모든 것이 삭제되지는 않았으며, 1, 3, 5 만 삭제되어 2, 4 및 6을 남겼습니다.
구문에는 오류가 없지만 원하는 결과는 얻지 못합니다. 이것은 알고리즘의 오류입니다! 수정하는 방법?
순서대로 삭제하면 역 순서로 삭제하십시오. for 문을 수정하십시오.
함수 deletedata () {
var el = document.getElementById ( 'thelist');
var linodes = document.getElementsByTagName ( "li");
경고 (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
경고 ( "삭제"+I+"Linodes [i] ="+Linodes [i]);
el.RemoveChild (Linodes [i]);
// <- el.removeChild (Linodes [i]);
}
}
시도해보세요! 다음 방법을 사용할 수도 있습니다.
함수 deletedata () {
var el = document.getElementById ( 'thelist');
var linodes = document.getElementsByTagName ( "li");
경고 (linodes.length);
for (var i = 0; i <el.childnodes.length; i ++) {
var childnode = el.childnodes [0]; // 항상 첫 번째를 삭제하면 더 쉽지 않습니다
el.RemoveChild (Childnode);
}
}
완료 코드는 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = gbk">
<title> iscroll 데모 : 단순 </title>
<script type = "text/javaScript">
함수 initData () {
var el = document.getElementById ( 'thelist');
var linodes = document.getElementsByTagName ( "li");
경고 (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
경고 ( "삭제"+I+"Linodes [i] ="+Linodes [i]);
el.RemoveChild (Linodes [i]);
// <- el.removeChild (Linodes [i]);
}
}
</스크립트>
<스타일 유형 = "text/css"media = "all">
몸, ul, Li {
패딩 : 0;
여백 : 0;
국경 : 0;
}
몸 {
글꼴 크기 : 12px;
-webkit-user select : 없음;
-webkit- 텍스트 크기 조정 : 없음;
Font-Family : Helvetica;
}
</스타일>
</head>
<body>
<div> <입력 유형 = "제출"값 = "Li 노드 삭제" /> < /div>
<div>
<ul>
<li> 예쁜 행 1 </li>
<li> 예쁜 행 2 </li>
<li> 예쁜 행 3 </li>
<li> 예쁜 행 4 </li>
<li> 예쁜 행 5 </li>
<li> 예쁜 행 6 </li>
<li> 예쁜 행 7 </li>
<li> 예쁜 행 8 </li>
<li> 예쁜 행 9 </li>
<li> 예쁜 행 10 </li>
<li> 예쁜 행 40 </li>
</ul>
</div>
</body>
</html>