javascript - 如何在Jquery中删除Ol子元素没有Li的Li元素？

Question

使用下面给定的代码，我想删除其子 ol 元素确实包含任何 li 元素的任何“li”元素，但无济于事。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ol id="myUL">
  <li>Hello 1</li>
  <li>Hello 2
    <ol></ol>
  </li>
  <li>Hello 3
    <ol>
      <li>Hello 3.1</li>
      <li>Hello 3.2</li>
      <li>Hello 3.3</li>
    </ol>
  </li>
</ol>

执行上述代码后，Hello 1、Hello 2 被删除。然而Hello 3的 child 也全部被移除了。

我的问题是为什么会这样？

Answer 1

您的选择器#myUL li也会选择Hello 3中的li，因为它们是#myUL<的li后代 并且由于它们中没有带有 li 的 ol ，因此它们被删除。 您可以使用子选择器 > 仅选择 #myUL 的子级。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ol id="myUL">
  <li>Hello 1</li>
  <li>Hello 2
    <ol></ol>
  </li>
  <li>Hello 3
    <ol>
      <li>Hello 3.1</li>
      <li>Hello 3.2</li>
      <li>Hello 3.3</li>
    </ol>
  </li>
</ol>