JQuery是否有可能在ul元素为空时显示消息并隐藏在item上'添加

JQuery is it possible to show message when ul element is empty and hide on items' add?

本文关键字：item 隐藏 添加 消息 显示 ul 有可能 是否 元素 JQuery      更新时间：2023-09-26

问题在标题中。我有一个没有列表项的ul元素，我需要显示一条消息(它可以是一个li元素)，用户可以在其中看到列表为空。一旦项目被添加到ul中，消息就应该被隐藏或删除。

列表可以动态更新，所以如果有人删除了ul中包含的所有li元素，它应该再次显示消息。

我有这个，但只在页面加载时显示消息:

if( !$("#minuta_minuta_participante_list_ul").has("li").length ) {
  $("#minuta_minuta_participante_list_ul").html("Sorry, this is empty");
}

对不起，如果问题是贫穷的。

您可以使用CSS空和之前，不需要JavaScript添加/删除消息。

ul:empty:before {
  content: "I am empty"
}
<h3>Empty</h3>
<ul></ul>
<h3>Not Empty</h3>
<ul><li>li</li></ul>

如果你想使用jquery，你必须知道列表中有多少元素。@epascarello的答案更简洁，更美观。

$(function() {
  var count = 0;
  if ($('#list li').length == 0) {
    $('#list').append('<div id="mssg">Empty List</div>');
  }
  $('#add').on('click', function() {
    if (count == 0) {
      $('#mssg').remove();
    }
    $('#list').append('<li id="element-' + count + '">List Element ' + count + '</li>');
    count++;
  });
  $('#remove').on('click', function() {
    if (count > 0) {
      $('#element-' + (count - 1)).remove();
      count--;
    }
    if (count == 0 && $('#mssg').length == 0) {
      $('#list').append('<div id="mssg">Empty List</div>');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='list'>
</ul>
<input type='button' value='Add' id='add' />
<input type='button' value='Remove' id='remove' />

相关文章：