Комментарий: Все узлы могут быть удалены с помощью JavaScript. В этой статье в основном обсуждается функция RemoveChild. Вы можете взглянуть на следующие примеры
Предположим, что в Div есть что -то:<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> iscroll demo: simple </title>
<script type = "text/javascript">
функция deletedata () {
}
</script>
<стиль типа = "text/css" media = "all">
тело, UL, li {
Заполнение: 0;
поля: 0;
граница: 0;
}
тело {
размер шрифта: 12px;
-Вебкит-пользователь-выбор: нет;
-Вебкит-текст-размер-нет: нет;
Семейство шрифта: Helvetica;
}
</style>
</head>
<тело>
<div> <input type = "pospe" value = "Delete Li Node" /> < /div>
<div>
<ul>
<li> Симпатичная строка 1 </li>
<li> Pretty Row 2 </li>
<li> Pretty Row 3 </li>
<li> Pretty Row 4 </li>
<li> Pretty Row 5 </li>
<li> Симпатичная строка 6 </li>
<li> Pretty Row 7 </li>
<li> Симпатичная строка 8 </li>
<li> Pretty Row 9 </li>
<li> Симпатичная строка 10 </li>
<li> Pretty Row 40 </li>
</ul>
</div>
</body>
</html>
Теперь вам нужно очистить их с помощью функций JavaScript.
Хотя это может быть непосредственно реализовано через одно предложение кода:
Document.getElementById (Content) .InnerHtml =
Однако в этой статье в основном обсуждается функция RemoveChild.
Я считал само собой разумеющимся, что это можно сделать с помощью следующего кода:
функция deletedata () {
var el = document.getElementbyId ('thelist');
var linodes = document.getElementsbytagname ("li");
предупреждение (linodes.length);
for (var i = 0; i <linodes.length; i ++) {
Alert ("удалить"+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.
В синтаксисе нет ошибок, но желаемый результат не получен. Это ошибка в алгоритме! Как это исправить?
Если вы удалите его в последовательности, удалите его в обратном порядке. Измените оператор для:
функция deletedata () {
var el = document.getElementbyId ('thelist');
var linodes = document.getElementsbytagname ("li");
предупреждение (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
Alert ("удалить"+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 demo: simple </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-) {
Alert ("удалить"+i+"linodes [i] ="+linodes [i]);
El.RemoveChild (Linodes [i]);
// <- el.RemoveChild (Linodes [i]);
}
}
</script>
<стиль типа = "text/css" media = "all">
тело, UL, li {
Заполнение: 0;
поля: 0;
граница: 0;
}
тело {
размер шрифта: 12px;
-Вебкит-пользователь-выбор: нет;
-Вебкит-текст-размер-нет: нет;
Семейство шрифта: Helvetica;
}
</style>
</head>
<тело>
<div> <input type = "pospe" value = "Delete Li Node" /> < /div>
<div>
<ul>
<li> Симпатичная строка 1 </li>
<li> Pretty Row 2 </li>
<li> Pretty Row 3 </li>
<li> Pretty Row 4 </li>
<li> Pretty Row 5 </li>
<li> Симпатичная строка 6 </li>
<li> Pretty Row 7 </li>
<li> Симпатичная строка 8 </li>
<li> Pretty Row 9 </li>
<li> Симпатичная строка 10 </li>
<li> Pretty Row 40 </li>
</ul>
</div>
</body>
</html>