代码之家 › 专栏 › 技术社区 › Houy Narun

如何删除ol child在jquery中没有li的li元素?

html jquery javascript

Houy Narun · 技术社区 · 6 年前

使用下面给出的代码,我想删除其子元素为 ol 元素不包含任何 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的孩子们也都被删除了。

我的问题是为什么?

3 回复 | 直到 6 年前

Musa 6 年前

你的选择器 #myUL li 也在选择 li 因为他们是 锂 后代 #myUL 既然他们没有 ol 具有 锂 在它们里面它们被移除。您可以使用子选择器 > 只选择 #米乌尔 是的。

$(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>

Jack Bashford 6 年前

您的代码正在遍历所有 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>

Nidhin Joseph 6 年前

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

更多信息 here

Hien Nguyen 6 年前

您可以使用查询选择器 #myUL li ol 去查一下里面的李。

$(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>