if文で何故trueになるのかがわかりません

解決したいこと

JavaScriptの//-------delete function-------の部分のif文が何でtrueになるのかを理解したいです。

何がわからないのか

deleteBtnがクリックされた時にdeleteItem関数が実行され、deleteBtnの親ノードの親ノードを返す変数elementを用意し、grocery-listの要素を取得した変数listからremoveChildで変数elementを削除する。
if文でlistの子要素が0だった場合にtrueだったら、containerからshow-containerクラスを削除する

この時list要素には<button class="clear-btn">clear items</button>が残っていると思うのですが、trueになるということは要素は残ってないとうことになります。

removeChildでいつ削除されたのかがわからないので教えてもらえたらありがたいです。

該当部分

// delete function
function deleteItem(e) {
  const element = e.currentTarget.parentElement.parentElement;
  list.removeChild(element);
  if (list.children.length === 0) {
    container.classList.remove("show-container");
  }
  displayAlert('item removed', 'danger');
  setBackToDefault();
  // remove from local storage
  // removeFromLocalStorage(id);
}

全コード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>grocery-bud</title>
8  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
9  <link rel="stylesheet" href="style.css">
10</head>
11<body>
12  <section class="section-center">
13    <!-- form -->
14    <form class="grocery-form">
15      <p class="alert"></p>
16      <h3>grocery bud</h3>
17      <div class="form-control">
18        <input type="text" id="grocery" placeholder="e.g. eggs" />
19        <button type="submit" class="submit-btn">submit</button>
20      </div>
21    </form>
22    <!-- list -->
23    <div class="grocery-container">
24      <div class="grocery-list"></div>
25      <button class="clear-btn">clear items</button>
26    </div>
27  </section>
28<script src="app.js"></script>
29</body>
30</html>

javascript
1// select items
2const form = document.querySelector(".grocery-form");
3const alert = document.querySelector(".alert");
4const grocery = document.getElementById("grocery");
5const submitBtn = document.querySelector(".submit-btn");
6const container = document.querySelector(".grocery-container");
7const list = document.querySelector(".grocery-list");
8const clearBtn = document.querySelector(".clear-btn");
9// edit option
10let editElement;
11let editFlag = false;
12let editID = "";
13// event listeners
14
15// submit form
16form.addEventListener("submit", addItem);
17// clear items
18clearBtn.addEventListener("click", clearItems);
19
20function addItem(e) {
21e.preventDefault();
22const value = grocery.value;
23// console.log(typeof value)
24const id = new Date().getTime().toString();
25if (value && !editFlag) {
26const element = document.createElement("article");
27let attr = document.createAttribute("data-id");
28attr.value = id;
29element.setAttributeNode(attr);
30element.classList.add("grocery-item");
31element.innerHTML = `<p class="title">${value}</p>
32<div class="btn-container">
33<!-- edit btn -->
34<button type="button" class="edit-btn">
35<i class="fas fa-edit"></i>
36</button>
37<!-- delete btn -->
38<button type="button" class="delete-btn">
39<i class="fas fa-trash"></i>
40</button>
41</div>
42`;
43const deleteBtn = element.querySelector('.delete-btn')
44const editBtn = element.querySelector('.edit-btn')
45deleteBtn.addEventListener('click',deleteItem)
46editBtn.addEventListener('click',editItem)
47// append child
48list.appendChild(element);
49// display alert
50displayAlert("item added to the list", "success");
51// show container
52container.classList.add("show-container")
53// add to local storage
54addToLocalStorage(id, value);
55// set bact to default
56setBackToDefault();
57}
58else if (value && editFlag ) {
59console.log("editing");
60}
61else {
62displayAlert('please enter value', 'danger');
63}
64}
65// display alert
66function displayAlert(text, action) {
67alert.textContent = text;
68alert.classList.add(`alert-${action}`);
69
70// remove alert
71setTimeout(function () {
72alert.textContent = "";
73alert.classList.remove(`alert-${action}`);
74}, 1000);
75}
76// clear items
77function clearItems() {
78const items = document.querySelectorAll(".grocery-item");
79
80if (items.length > 0) {
81items.forEach(function (item) {
82list.removeChild(item);
83})
84}
85container.classList.remove("show-container");
86displayAlert("empty list", "danger");
87setBackToDefault();
88// localStorage.removeItem('list');
89}
90//------- delete function-------
91function deleteItem(e) {
92const element = e.currentTarget.parentElement.parentElement;
93list.removeChild(element);
94if (list.children.length === 0) {
95container.classList.remove("show-container");
96}
97displayAlert('item removed', 'danger');
98setBackToDefault();
99// remove from local storage
100// removeFromLocalStorage(id);
101}
102// edit function
103function editItem() {
104}
105// set back to default
106function setBackToDefault() {
107grocery.value = "";
108editFlag = false;
109editID = "";
110submitBtn.textContent = "submit";
111}
112// local storage
113function addToLocalStorage(id, value) {
114// console.log("added to local storage");
115}

css
1/*
2===============
3Fonts
4===============
5*/
6@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
7
8/*
9===============
10Variables
11===============
12*/
13
14:root {
15  /* dark shades of primary color*/
16  --clr-primary-1: hsl(205, 86%, 17%);
17  --clr-primary-2: hsl(205, 77%, 27%);
18  --clr-primary-3: hsl(205, 72%, 37%);
19  --clr-primary-4: hsl(205, 63%, 48%);
20  /* primary/main color */
21  --clr-primary-5: #49a6e9;
22  /* lighter shades of primary color */
23  --clr-primary-6: hsl(205, 89%, 70%);
24  --clr-primary-7: hsl(205, 90%, 76%);
25  --clr-primary-8: hsl(205, 86%, 81%);
26  --clr-primary-9: hsl(205, 90%, 88%);
27  --clr-primary-10: hsl(205, 100%, 96%);
28  /* darkest grey - used for headings */
29  --clr-grey-1: hsl(209, 61%, 16%);
30  --clr-grey-2: hsl(211, 39%, 23%);
31  --clr-grey-3: hsl(209, 34%, 30%);
32  --clr-grey-4: hsl(209, 28%, 39%);
33  /* grey used for paragraphs */
34  --clr-grey-5: hsl(210, 22%, 49%);
35  --clr-grey-6: hsl(209, 23%, 60%);
36  --clr-grey-7: hsl(211, 27%, 70%);
37  --clr-grey-8: hsl(210, 31%, 80%);
38  --clr-grey-9: hsl(212, 33%, 89%);
39  --clr-grey-10: hsl(210, 36%, 96%);
40  --clr-white: #fff;
41  --clr-red-dark: hsl(360, 67%, 44%);
42  --clr-red-light: hsl(360, 71%, 66%);
43  --clr-green-dark: hsl(125, 67%, 44%);
44  --clr-green-light: hsl(125, 71%, 66%);
45  --clr-black: #222;
46  --ff-primary: "Roboto", sans-serif;
47  --ff-secondary: "Open Sans", sans-serif;
48  --transition: all 0.3s linear;
49  --spacing: 0.25rem;
50  --radius: 0.5rem;
51  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
52  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
53  --max-width: 1170px;
54  --fixed-width: 620px;
55}
56/*
57===============
58Global Styles
59===============
60*/
61
62}
63/*
64===============
65Grocery List
66===============
67*/
68.section-center {
69  background: var(--clr-white);
70  border-radius: var(--radius);
71  box-shadow: var(--light-shadow);
72  transition: var(--transition);
73  padding: 2rem;
74}
75.section-center:hover {
76  box-shadow: var(--dark-shadow);
77}
78.alert {
79  margin-bottom: 1rem;
80  height: 1.25rem;
81  display: grid;
82  align-items: center;
83  text-align: center;
84  font-size: 0.7rem;
85  border-radius: 0.25rem;
86  letter-spacing: var(--spacing);
87  text-transform: capitalize;
88}
89.alert-danger {
90  color: #721c24;
91  background: #f8d7da;
92}
93.alert-success {
94  color: #155724;
95  background: #d4edda;
96}
97.grocery-form h3 {
98  color: var(--clr-primary-1);
99  margin-bottom: 1.5rem;
100  text-align: center;
101}
102.form-control {
103  display: flex;
104  justify-content: center;
105}
106#grocery {
107  padding: 0.25rem;
108  padding-left: 1rem;
109  background: var(--clr-grey-10);
110  border-top-left-radius: var(--radius);
111  border-bottom-left-radius: var(--radius);
112  border-color: transparent;
113  font-size: 1rem;
114  flex: 1 0 auto;
115  color: var(--clr-grey-5);
116}
117#grocery::placeholder {
118  font-family: var(--ff-secondary);
119  color: var(--clr-grey-5);
120}
121.submit-btn {
122  background: var(--clr-primary-8);
123  border-color: transparent;
124  flex: 0 0 5rem;
125  display: grid;
126  align-items: center;
127  padding: 0.25rem;
128  text-transform: capitalize;
129  letter-spacing: 2px;
130  border-top-right-radius: var(--radius);
131  border-bottom-right-radius: var(--radius);
132  cursor: pointer;
133  content: var(--clr-primary-5);
134  transition: var(--transition);
135  font-size: 0.85rem;
136}
137.submit-btn:hover {
138  background: var(--clr-primary-5);
139  color: var(--clr-white);
140}
141
142.grocery-container {
143  margin-top: 2rem;
144  transition: var(--transition);
145  visibility: hidden;
146}
147.show-container {
148  visibility: visible;
149}
150.grocery-item {
151  display: flex;
152  align-items: center;
153  justify-content: space-between;
154  margin-bottom: 0.5rem;
155  transition: var(--transition);
156  padding: 0.25rem 1rem;
157  border-radius: var(--radius);
158  text-transform: capitalize;
159}
160.grocery-item:hover {
161  color: var(--clr-grey-5);
162  background: var(--clr-grey-10);
163}
164.grocery-item:hover .title {
165  color: var(--clr-grey-5);
166}
167.title {
168  margin-bottom: 0;
169  color: var(--clr-grey-1);
170  letter-spacing: 2px;
171  transition: var(--transition);
172}
173.edit-btn,
174.delete-btn {
175  background: transparent;
176  border-color: transparent;
177  cursor: pointer;
178  font-size: 0.7rem;
179  margin: 0 0.15rem;
180  transition: var(--transition);
181}
182.edit-btn {
183  color: var(--clr-green-light);
184}
185.edit-btn:hover {
186  color: var(--clr-green-dark);
187}
188.delete-btn {
189  color: var(--clr-red-light);
190}
191.delete-btn:hover {
192  color: var(--clr-red-dark);
193}
194.clear-btn {
195  text-transform: capitalize;
196  width: 10rem;
197  height: 1.5rem;
198  display: grid;
199  align-items: center;
200  background: transparent;
201  border-color: transparent;
202  color: var(--clr-red-light);
203  margin: 0 auto;
204  font-size: 0.85rem;
205  letter-spacing: var(--spacing);
206  cursor: pointer;
207  transition: var(--transition);
208  margin-top: 1.25rem;
209}
210.clear-btn:hover {
211  color: var(--clr-red-dark);
212}
213