CODEWITHSUNDEEP
jquery
HJW
HJW

Reputation: 1032

can't hide div after removing last item

I have a simple to-do list as my first project. When clicking to remove the last item on the list, i want the whole gray DIV to disappear, instead an empty box remains. I have read many answers on here, but nothing seems to work for my situation, OR i am doing it wrong which is more likely.

I have the following code on 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>

Upvotes: 0

Views: 100

Answers (4)

Suresh
Suresh

Reputation: 59

Remove multiple empty lists

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

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

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

instead of 

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

use 

 $('.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>

Upvotes: 0

Zaid Bin Khalid
Zaid Bin Khalid

Reputation: 763

You just need to remove the padding of the container. Currently, hide is working fine. Only the problem is with your CSS Style.

Also, add ul style.

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

Upvotes: 0

Arun_SE
Arun_SE

Reputation: 230

For a simple fix just replace this code

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

OR you can replace the background colour from .list-container to li

Upvotes: 2

Related Questions