删除最后一项后无法隐藏div

Question

我有一个简单的待办事项列表作为我的第一个项目。当点击删除列表中的最后一个项目时，我想让整个灰色DIV消失，而是保留一个空白框。我在这里阅读了许多答案，但似乎没有任何工作适合于我的情况，或者我做错了，更可能。

我有https://codepen.io/HelleFl/pen/OjNQop

$(function() { 
 
    // Hide the container upon ready 
 
    $(".list-container").hide(); 
 

 
    //* Prevent empty Add from continuing function by Evaluation; It will not accept only spaces; Clear input list once add is clicked; add item & Font Awesome icon to list *// 
 
    $("#button").click(function() { 
 
    if ($("input[name=checkListItem]").val().trim() !== "") { 
 
     var toAdd = $("input[name=checkListItem]").val(); 
 
     $(".list-container").fadeIn(500); 
 
     $(".list").append(
 
     '<div class="item"><i class="fa fa-times" aria-hidden="true"/>' + 
 
     toAdd + 
 
     "</div>" 
 
    ); 
 
    } 
 

 
    // Focus back on text input once add is clicked 
 
    $("input[name=checkListItem]").val("").focus(); 
 

 
    // click the X icon to remove that item 
 
    $(document).on("click", ".fa", function() { 
 
     $(this).parent().remove(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class='form'> 
 
    <input type="text" name="checkListItem" class='hover-box' placeholder='Enter your shenanigans' /> 
 
    <button class='btn btn-primary' id="button">Add!</button> 
 
    <hr> 
 
    </div> 
 

 
    <div class='list-container'> 
 
    <h3>My to-do list</h3> 
 
    <div class='container'> 
 
     <ul class='list'> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

下面的代码对于一个简单的解决只是将这段代码

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

OR 你可以从更换背景颜色。清单容器至li

Answer 2

你只需要删除容器的填充。目前，hide工作正常。只有问题出在你的CSS款式上。

此外，添加ul风格。

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

Answer 3

，而不是

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

使用

$('.item').click(function() { 
    $(this).remove(); 
}); 

$(function() { 
 
    $(".list-container").hide(); 
 

 
    $("#button").click(function() { 
 
    if ($("input[name=checkListItem]").val().trim() !== "") { 
 
     var toAdd = $("input[name=checkListItem]").val(); 
 
     $(".list-container").fadeIn(500); 
 
     $(".list").append(
 
     '<div class="item"><i class="fa fa-times" aria-hidden="true"/>' + 
 
     toAdd + 
 
     "</div>" 
 
    ); 
 
    } 
 
    $("input[name=checkListItem]").val("").focus(); 
 

 
    $('.item').click(function() { 
 
     $(this).remove(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class='form'> 
 
    <input type="text" name="checkListItem" class='hover-box' placeholder='Enter your shenanigans' /> 
 
    <button class='btn btn-primary' id="button">Add!</button> 
 
    <hr> 
 
    </div> 
 

 
    <div class='list-container'> 
 
    <h3>My to-do list</h3> 
 
    <div class='container'> 
 
     <ul class='list'> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

删除多个空列表

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

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