即使元素在代码中发生了更改，也无法在将其显示设置为无后将其显示回

一旦我通过接口向列表添加了新项目，我就试图隐藏列表中的初始列表项目。一旦数组中没有项目，我就需要将其显示出来。现在的情况是，我可以隐藏它，但一旦我的数组为空，我就无法再次显示它。。。

const todo = document.querySelector("#todo");
const noItem = document.getElementById("noItem");
const todoList = document.querySelector("#list-container > ul")
let todoArr = [];
checkTodoList = (todoLista) => todoLista.length;
todo.addEventListener("keypress", (event) => {
let todoItem = todo.value;
if (event.keyCode == 13) {
if (todoItem === "") return alert("Please Enter a todo item");
checkTodoList(todoArr) == 0 ? noItem.style.display = 'none' : ""
todoArr.push(todoItem);
todoList.innerHTML += `<li class="list-item" onclick="checker(this)">${todoItem}<span id="closeBtn" onclick="removeItem(this)"><i class="fa fa-times" aria-hidden="true"></span></i>
</li>`;
todo.value = "";
}
});
checker = (listItem) => {
listItem.classList.toggle("checked");
}
removeItem = (event) => {
//remove whitespace from string
const itemIndex = event.parentElement.textContent.trim();
//remove item from the array
todoArr.splice(todoArr.indexOf(itemIndex), 1);
//remove item from the dom
event.parentNode.remove();
//checkTodoList(todoArr)==0?alert("hi"):""
checkTodoList(todoArr) == 0 ? noItem.style.display = 'block' : ""
}

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Todo List</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src="https://use.fontawesome.com/eb7f48436a.js"></script>
<script src='js/main.js' async="async"></script>
</head>
<body>
<div id="container">
<h1>Enjoy Your Day</h1>
<div id="list-container">
<input type="text" name="todo" id="todo" placeholder="Add item...">
<div id="input-alert">
<p>Ooops!Please, enter item </p>
</div>
<ul class="list">
<li class='list-item' id="noItem">No Item in your list </li>
</ul>
</div>
</div>
</body>
</html>

我将其添加到您的removeItem函数中：

if (document.querySelectorAll("ul.list li:not(#noItem)").length < 1) {
document.querySelector("#noItem").style.display = "";
}

并将其输入todo.addEventListener("keypress"，(event(

if (document.querySelectorAll("ul.list li:not(#noItem)").length > 0) {
document.querySelector("#noItem").style.display = "none";
}

也许可以用不同的方式来完成，但我不想分析你的整个代码。

当您按下remove-item时，只需检查列表中是否有除#noitem之外的li项目，如果没有，则显示#noitem。添加项目也是如此，如果项目超过1 li，请删除#noitem。。。

const todo = document.querySelector("#todo");
const noItem = document.getElementById("noItem");
const todoList = document.querySelector("#list-container > ul")
let todoArr = [];
checkTodoList = (todoLista) => todoLista.length;
todo.addEventListener("keypress", (event) => {
let todoItem = todo.value;
if (event.keyCode == 13) {
if (todoItem === "") return alert("Please Enter a todo item");
checkTodoList(todoArr) == 0 ? noItem.style.display = 'none' : ""
todoArr.push(todoItem);
todoList.innerHTML += `<li class="list-item" onclick="checker(this)">${todoItem}<span id="closeBtn" onclick="removeItem(this)"><i class="fa fa-times" aria-hidden="true"></span></i>
</li>`;
todo.value = "";
}

if (document.querySelectorAll("ul.list li:not(#noItem)").length > 0) {
document.querySelector("#noItem").style.display = "none";
}

});
checker = (listItem) => {
listItem.classList.toggle("checked");
}
removeItem = (event) => {
//remove whitespace from string
const itemIndex = event.parentElement.textContent.trim();
//remove item from the array
todoArr.splice(todoArr.indexOf(itemIndex), 1);
//remove item from the dom
event.parentNode.remove();
//checkTodoList(todoArr)==0?alert("hi"):""
checkTodoList(todoArr) == 0 ? noItem.style.display = 'block' : "";

if (document.querySelectorAll("ul.list li:not(#noItem)").length < 1) {
document.querySelector("#noItem").style.display = "";
} 
}

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Todo List</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src="https://use.fontawesome.com/eb7f48436a.js"></script>
<script src='js/main.js' async="async"></script>
</head>
<body>
<div id="container">
<h1>Enjoy Your Day</h1>
<div id="list-container">
<input type="text" name="todo" id="todo" placeholder="Add item...">
<div id="input-alert">
<p>Ooops!Please, enter item </p>
</div>
<ul class="list">
<li class='list-item' id="noItem">No Item in your list </li>
</ul>
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：