JavaScript实现ul无子元素时隐藏指定h5功能不生效如何解决

• jQuery中length是属性而非方法，你代码里写的length()属于语法错误，会直接导致判断逻辑不执行
• 现有判断仅在页面首次加载时运行一次，后续用户执行删除操作修改ul子元素数量时，不会重新触发判断，因此删空列表后也不会隐藏两个h5元素

先封装公共的列表空状态检查函数，在页面初始化、每次删除操作完成后都调用该函数即可，完整可运行代码如下：

$(function() {
  // 页面初始化先检查一次空状态
  checkListEmpty();

  // 原有交互：点击delete淡入叉号图片
  $("#delete").on("click", function() {
    $("li.cross img").fadeIn();
  });

  // 原有交互：点击叉号删除对应条目
  $("#list-div").on("click", "li.cross img", function() {
    // 移除当前叉号所在li和前一个链接li
    $(this).parent().prev().remove();
    $(this).parent().remove();
    // 删除完成后重新检查空状态
    checkListEmpty();
  });

  // 原有交互：点击close-delete隐藏叉号图片
  $("#close-delete").on("click", function() {
    $("li.cross img").hide();
  });

  // 空状态检查封装函数
  function checkListEmpty() {
    const $list = $("#list-div");
    // 注意length是属性，不加括号
    if ($list.children().length === 0) {
      $("#delete, #close-delete").hide();
    } else {
      $("#delete, #close-delete").show();
    }
  }
})

内容的提问来源于stack exchange，提问作者Sahil Handique