js DOM操作 容易犯的错误

这样一段html片段

<select class="form-control" id="course_chapter" onchange="fill_course_section(this)">
　　<option value="0">--选择章节--</option>
　　<option value="1">第一章  鲁迅</option>
　　<option value="2">第二章 小石头记</option>
　　<option value="3">第三章 白居易</option>
</select>

现在要做的是 把select下面的option删除掉，保留第一个

这是错误代码：

for( var i=1 ;i<=$("#course_chapter").children("option").length; i++ ) {
    $($("#course_chapter").children("option")[i]).remove();
}

结果很怪异，最后 白居易 那一条  没有被删除，经过一步一步观察 发现了问题

在执行第一次  remove后 ， $("#course_chapter").children("option")的长度发生了变化 变小了，

改进代码：

var chapter_count = $("#course_chapter").children("option").length;
for( var i=1 ;i<chapter_count; i++ ) {
　　$($("#course_chapter").children("option")[i]).remove();
}

这次我把总数提出来了，不受 remove的影响而变化，再次执行代码，什么？？ 第二条 option 没有被删掉？

我再次陷入了沉思。经过几秒中的思想斗争，我发现了问题。

本质问题还是跟上面一样，虽然总数提到外面了，但事实上select的长度随着删除会变短，当删除第一条后 变量i增加到2，而本身处于第二位的  小石头那一条 因为

上一条被删除而移到了第一，所以造成漏删。

最终改进代码（ i =>1 ）：

var chapter_count = $("#course_chapter").children("option").length;
for( var i=1 ;i<chapter_count; i++ ) {
　　$($("#course_chapter").children("option")[1]).remove();
}

 

转载于:https://www.cnblogs.com/codeAB/p/9565599.html