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的孩子也全部删除了。

我的问题是为什么？

Answer 1

您的选择器#myUL li也在选择Hello 3中的li，因为它们是li的{{1}}子孙，并且与{ {1}}在他们被删除。您可以使用子选择器#myUL仅选择ol的子代。

li

Answer 2

您的代码正在遍历li中包含的所有#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>

Answer 3

if ($('#el').is(':empty')){
  // custom code
}

更多信息here

Answer 4

您可以使用查询选择器#myUL li ol查找ol并检查其中的li。

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

$(document).ready(function() {
  $('#myUL li ol').each(function() {
    var lenLi = $(this).find('li').length;
    console.log(lenLi);
    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>

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

4 个答案: