jQuery集合在each循环中失效：移除元素后innerHTML恢复异常排查

我来帮你拆解一下问题所在：

需求与遇到的问题 #

原本我想实现的逻辑是：遍历<select>的所有<option>元素，找到值为'b'的选项就移除它；如果没匹配到，就把<select>恢复成初始的HTML内容。但运行代码后，目标选项并没有被移除，反而整个select回到了最初的完整状态。

原实现代码 #

var initialHTML = $('#myselect').html(); 
$('#myselect option').each(function(){ 
  if($(this).val() === 'b'){ 
    $(this).remove(); 
    console.log('matching. removed.'); 
    return false; 
  }else{ 
    $('#myselect').html(initialHTML); 
    console.log('not matching. html restored.'); 
  } 
}); 

预期得到的select结构 #

<select id="myselect"> 
  <option value="a">a</option> 
  <option value="c">c</option> 
</select> 

实际得到的select结构 #

<select id="myselect"> 
  <option value="a">a</option> 
  <option value="b">b</option> 
  <option value="c">c</option> 
</select> 

错误原因分析 #

核心问题出在遍历逻辑和DOM修改的时机上：

$('#myselect option')会先构建一个当前所有选项的列表，但是当遍历到第一个选项a时，因为它的值不是'b'，你执行了$('#myselect').html(initialHTML)，直接把整个select的DOM重置回初始状态了。这时候之前构建的选项列表已经和页面上实际的DOM脱节，后续遍历到选项b时，$(this).remove()操作的是旧列表里的元素，根本不会影响到页面上已经被重置后的DOM，所以最后select还是保持初始状态。

可行的解决方案 #

调整逻辑顺序：先把select重置为初始HTML，再遍历移除目标选项，这样整个过程中DOM和遍历的元素是同步的：

var initialHTML = $('#myselect').html(); 
function doIt(){ 
  $('#myselect').html(initialHTML); 
  $('#myselect option').each(function(){ 
    if($(this).val() === 'b'){ 
      $(this).remove(); 
    } 
  }); 
} 

内容的提问来源于stack exchange，提问作者neoDev