Question

我不确定我的代码究竟出了什么问题

<ul>
  <li>
    <p id='placeHolder' style='display: none;'>Empty NOW!</p>
    <ul class='list'>
       <li>Item One<a href='#' class='clear'>Remove</a></li>
       <li>Item Two<a href='#' class='clear'>Remove</a></li>
    </ul>
  </li>
</ul>

$('a.clear').click(function() { 
    $(this).parent().remove();

    if($('.list li').length == 0) { 
      document.getElementById('placeHolder').style.display='block';
      console.log('its empty now');
    }

    return false;
});

假设你从列表中删除了这些项目，li现在是ZERO，我不确定为什么placeHolder实际上没有显示placeHolder？

我使用console.log来确保实际检查的长度并且它是一个有效的语句。关于为什么getElementById没有解雇的任何建议？

Answer 1

为了验证您的条件$('.list li').length == 0，您必须通过查找公共选择器来删除这两个列表项：

$('li a').click(function() { // the choice of the selector is of course up to you :)
    $(this).parent().remove();
    if($('.list li').length == 0) { 
      document.getElementById('placeHolder').style.display='block';
      console.log('its empty now');
    }
    return false;
});

或删除父级的父级：$(this).parent().parent().remove();

placeHolder id不使用style.display显示

1 个答案: