Question

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

上有以下代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

对于一个简单的修复，只需替换此代码

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

OR 您可以将背景颜色从 .list-container 替换为 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();
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

删除多个空列表

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

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

删除最后一项

4 个答案: