Jquery can'；删除最后一项后不隐藏div

我有一个简单的待办事项清单作为我的第一个项目。当单击以删除列表上的最后一项时，我希望整个灰色DIV消失，而保留一个空框。我在这里读了很多答案，但似乎没有什么对我的情况起作用，或者我做错了，这更有可能

我有下面的代码

$（函数（）{
//准备好后把容器藏起来
$（“.list container”）.hide（）；
//*通过评估防止空添加继续执行功能；它将不只接受空格；单击添加后清除输入列表；将项目和字体图标添加到列表*//
$（“#按钮”）。单击（函数（）{
if（$（（“输入[name=checkListItem]”）.val（）.trim（）！==“”）{
var toAdd=$（“输入[name=checkListItem]”）。val（）；
$（“.list container”）.fadeIn（500）；
$（“.list”）.append(
'' +
蟾蜍+
""
);
}
//单击“添加”后，重新关注文本输入
$（“输入[name=checkListItem]”.val（“”.focus（）；
//单击X图标以删除该项目
$（document）.on（“click”，“.fa”，function（）{
$（this.parent（）.remove（）；
});
});
});

添加

我的待办事项清单


对于简单的修复，只需替换此代码即可

$(document).on("click", ".fa", function() {
  $(this).parent().remove();
  if($(".fa").length == 0)
    {
      $(".list-container").hide();
    }
});

或
您可以将背景颜色从.list容器替换为li
，只需替换此代码即可

$(document).on("click", ".fa", function() {
  $(this).parent().remove();
  if($(".fa").length == 0)
    {
      $(".list-container").hide();
    }
});

或
您可以将.list容器中的背景色替换为li
您只需删除容器的填充即可。目前，“隐藏”工作正常。唯一的问题是你的
CSS
风格

另外，添加
ul
样式

.container {
  background-color: lightgray;
  border-radius: 10px;
  margin-bottom: 2em;
  /*padding-top: 1em;*/ 
  width: 30%;
}
ul {margin: 0; padding: 0}

您只需要移除容器的填充物。目前，“隐藏”工作正常。唯一的问题是你的
CSS
风格

另外，添加
ul
样式

.container {
  background-color: lightgray;
  border-radius: 10px;
  margin-bottom: 2em;
  /*padding-top: 1em;*/ 
  width: 30%;
}
ul {margin: 0; padding: 0}

而不是

 $(document).on("click", ".fa", function() {
      $(this).parent().remove();
    });

使用


$（函数（）{
$（“.list container”）.hide（）；
$（“#按钮”）。单击（函数（）{
if（$（（“输入[name=checkListItem]”）.val（）.trim（）！==“”）{
var toAdd=$（“输入[name=checkListItem]”）。val（）；
$（“.list container”）.fadeIn（500）；
$（“.list”）.append(
'' +
蟾蜍+
""
);
}
$（“输入[name=checkListItem]”.val（“”.focus（）；
$（'.item'）。单击（函数（）{
$（this.remove（）；
});
});
});

添加

我的待办事项清单


而不是

 $(document).on("click", ".fa", function() {
      $(this).parent().remove();
    });

使用


$（函数（）{
$（“.list container”）.hide（）；
$（“#按钮”）。单击（函数（）{
if（$（（“输入[name=checkListItem]”）.val（）.trim（）！==“”）{
var toAdd=$（“输入[name=checkListItem]”）。val（）；
$（“.list container”）.fadeIn（500）；
$（“.list”）.append(
'' +
蟾蜍+
""
);
}
$（“输入[name=checkListItem]”.val（“”.focus（）；
$（'.item'）。单击（函数（）{
$（this.remove（）；
});
});
});

添加

我的待办事项清单


删除多个空列表

$(document).on("click", ".fa", function() {
     $(".list").each(function() {
            var current_element = $(this);      

            if(current_element.text().trim()==""){
                current_element.remove();
            }       
      });  
}); 

删除多个空列表

$(document).on("click", ".fa", function() {
     $(".list").each(function() {
            var current_element = $(this);      

            if(current_element.text().trim()==""){
                current_element.remove();
            }       
      });  
}); 

可能重复刚才删除的
填充顶部：1em从
.container
然后添加
ul{margin:0；padding:0}
@milanChheda我可以这样做，但是当列表包含可能重复的项时，它看起来非常糟糕，只需删除
padding top:1em从
.container
然后添加
ul{margin:0；padding:0}
@milanChheda我可以这样做，但是当列表包含项目时，它看起来非常糟糕。我只希望在单击项目旁边显示的字体图标时删除项目，不是项目本身我只希望在单击项目旁边的字体图标时删除项目，而不是项目本身