getElementsByTagName и parentNode.removeChild
Приветствую, всех кто читает этот топик, какая-то хрень со связкой getElementsByTagName и parentNode.removeChild, в цикле почему то удаляет только по одному элементу, то есть надо вызвать цикл два раза чтобы удалить два элемента с такими тегами, простейший пример:
<script type="text/javascript">
function ulsdel(){
var UlList=document.getElementById('uls').getElementsByTagName('ul');
for(i=0; i<UlList.length; i++){
UlList[i].parentNode.removeChild(UlList[i])}
}
</script>
<div id="uls">
<ul><li>первый</li><li>первый</li><li>первый</li><li>первый</li></ul>
<ul><li>второй</li><li>второй</li><li>второй</li><li>второй</li></ul>
</div>
<input type="button" onclick="ulsdel()" value="Удалить UL">
Приходится нажимать кнопку два раза, чтобы удалить эти два тега ul, каждое нажатие удаляет один из них, а например если не parentNode.removeChild, а innerHTML, всё работает идеально, подскажите, пожалуйста, может есть тонкости с getElementsByTagName и parentNode.removeChild? |
<script type="text/javascript">
function ulsdel(){
var UlList=document.getElementById('uls').getElementsByTagName('ul');
for(i=0; i<UlList.length; i++){
alert(UlList.length);
UlList[i].parentNode.removeChild(UlList[i])
alert(UlList.length);
}
}
</script>
<div id="uls">
<ul><li>первый</li><li>первый</li><li>первый</li><li>первый</li></ul>
<ul><li>второй</li><li>второй</li><li>второй</li><li>второй</li></ul>
</div>
<input type="button" onclick="ulsdel()" value="Удалить UL">
|
Ааа, ну теперь понятно, тут счётчик должен не постинкрементироваться, а умножаться на 2:
<script type="text/javascript">
function ulsdel(){
var UlList=document.getElementById('uls').getElementsByTagName('ul');
for(i=0; i<UlList.length; i*2){
UlList[i].parentNode.removeChild(UlList[i])
}
}
</script>
<div id="uls">
<ul><li>первый</li><li>первый</li><li>первый</li><li>первый</li></ul>
<ul><li>второй</li><li>второй</li><li>второй</li><li>второй</li></ul>
</div>
<input type="button" onclick="ulsdel()" value="Удалить UL">
B@rmaley.e><e, спасибо |
Лучше использовать обход в обратном порядке
<script type="text/javascript">
function ulsdel(){
var UlList=document.getElementById('uls').getElementsByTagName('ul');
for(i=UlList.length; i--;){
UlList[i].parentNode.removeChild(UlList[i])}
}
</script>
<div id="uls">
<ul><li>первый</li><li>первый</li><li>первый</li><li>первый</li></ul>
<ul><li>второй</li><li>второй</li><li>второй</li><li>второй</li></ul>
</div>
<input type="button" onclick="ulsdel()" value="Удалить UL">
|
Лучше все-таки innerHTML обнулять, но если сильно хочется, то обычный while
while (UlList.length) {
UlList[0].parentNode.removeChild(UlList[0]);
}
|
Kolyaj, дело в том что тут генерирующиеся менюшки в одном диве и в этом диве есть ещё и кнопки. поэтому если обнулять див то удалятся не только меню, а если создать для меню отдельный див скрипт начинает лагать, потому что я там уже всё четко подстроил, придётся несколько перестраивать, так что обнуление innerHTML не подходит, но за совет спасибо, буду использовать while.
B@rmaley.e><e, спасибо за помощь, тебе + не могу поставить так как вылазит ограничение на увеличение репутации, я тебе недавно ставил, поэтому система не даёт тебе повысить репу. Добавлено спустя некоторое время: while не работает когда в диве найден только один элемент. |
Цитата:
Описание ситуации: в уллисте 2 нода[0],[1]. В первом цикле удаляется [0]. i++(=1). В уллисте 1 нод[0]<=положение 2-го нода после удаления 1-го |
| Часовой пояс GMT +3, время: 23:42. |