如何用jQuery移除子ol无li的li元素？现有代码执行异常原因咨询

你的代码出现这个意外结果，核心问题出在选择器的范围上：

你用的选择器是 $('#myUL li')，这是一个后代选择器，它会选中#myUL元素下所有层级的<li>元素——不仅包括最外层的三个<li>（Hello 1、Hello 2、Hello 3），还会包含Hello 3里面<ol>下的三个子<li>（Hello 3.1、3.2、3.3）。

当循环遍历到这些子<li>时，它们内部没有嵌套<ol>，所以$(this).find('ol').children('li').length的结果是0，触发了remove()操作，导致这些子元素被删掉了。而最外层的Hello 3因为内部<ol>有子<li>，所以被保留，但它的子元素已经被循环移除了。

把选择器改成直接子元素选择器 $('#myUL > li')，这样只会遍历#myUL的直接子<li>，不会深入到后代层级：

$(document).ready(function() {
  $('#myUL > li').each(function() {
    var lenLi = $(this).find('ol').children('li').length;
    if (lenLi == 0) {
      $(this).remove();
    }
  })
})

执行修正后的代码后：

• Hello 1：因为没有嵌套<ol>，lenLi为0，被移除；
• Hello 2：嵌套的<ol>没有子<li>，lenLi为0，被移除；
• Hello 3：嵌套的<ol>有3个子<li>，lenLi为3，会被保留，且它的子元素也不会被触动。

这样就完全符合你最初的需求：只移除那些自身包含的<ol>没有子<li>的目标<li>元素。

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