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, время: 22:50. |