删除 <li> 标签后确定空 <ul> 标签

Question

我想确定删除 <li> 标签后 <ul> 标签何时为空。有人可以帮助我吗？

有一个html代码：

$(document).on('click', '.close', function(e) {
  $(this).parent().fadeOut("normal", function() {
    $target.remove();
  });
  if ($(this).closest(".indexy").not(".info")) {
    alert("prazdne");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="indexy">
  <li class="info">ASD<button type="button" class="close">&times;</button></li>
  <li class="info">FGH<button type="button" class="close">&times;</button></li>
  <li class="info">JKL<button type="button" class="close">&times;</button></li>
</ul>

Answer 1

在使用要检查的选择器时使用长度属性。

if($('ul.indexy li').length < 1){
    console.log('empty');
}

Answer 2

你可以用js做到这一点 var confirm = document.getElementsByClassName("indexy")[0].hasChildNodes(); 如果它有 childNodes 或 children 它将 return "true" 到变量确认，如果没有它会 return "false"。如果这是唯一具有 class 名称的元素，则列表的索引为零。否则你将不得不迭代

Answer 3

我认为您不能使用 $(this)，因为您已经将其从 DOM 中删除。 DOM

中不再有

$(document).on('click', '.close', function(e) {

       $(this).parent('li').remove();
                   
       if($('.indexy li').length<1){
                
           console.log('ul empty ');
        }else{
        
           console.log('li length is :'+$('.indexy li').length);
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="indexy">
            <li class="info">ASD<button type="button" class="close">&times;</button></li>
            <li class="info">FGH<button type="button" class="close">&times;</button></li>
            <li class="info">JKL<button type="button" class="close">&times;</button></li>
        </ul>

Answer 4

你可以为你的 js 代码做这样的事情：

function removeListItem(item) {  
  $('#'+item).fadeOut("normal", function(){
    $(this).remove();
    var li = $('li.info');
    alert(li.length);
    if (li.length <= 0){
        alert("prazdne");
    }        
  })
}

我也对你的 HTML 做了一些改动。这是一个 li 例如：

<li id="element1" class="info">ASD<button type="button" class="close" onclick="removeListItem('element1')">&times;</button></li>

您没有做的一件事实际上是从 DOM 中删除列表项。

Answer 5

$(document).on('click', '.close', function(e) {
  $(this).closest("li").remove();
  if (!$(".indexy").find('li').length) {
    alert("UL is empty")
  }
});

Fiddle Demo

删除 <li> 标签后确定空 <ul> 标签

Determine empty <ul> tag after removing <li> tag

tags

jquery

html-lists

remove-if