javascript - placeHolder id 不显示使用 style.display

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 现在为零，我不确定为什么 placeHolder 实际上不显示 placeHolder？

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

Answer 1

为了验证您的条件 $('.list li').length == 0，您必须删除两个列表项，方法是找到一个公共(public)选择器:

$('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();