Я создал этот проект Todo, в котором можно добавлять задачи, удалять их и пролистывать те, которые были завершены, но Я сталкиваюсь с проблемой при добавлении новой задачи в список, т.е. каждый раз при добавлении. нового задания оставляет пустое альтернативное пространство, не в состоянии найти ошибку .
Ниже приведен файл js:
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click","span",function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13)
{
var todosText=$(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")
}
});
$(".fa-pencil-square").click(function(){
$("input[type='text']").fadeToggle();
});
html файл:
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<script type="text/javascript" src="assests/js/lib/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="assests/css/todos.css">
<link href="https://fonts.googleapis.com/css?family=Gayathri|Open+Sans:600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assests/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Gayathri:700&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<h1 >TO-DO LIST <i class="fa fa-pencil-square" aria-hidden="true"></i></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Check the theme</li>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Go to the store</li>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Select dress </li>
</ul>
</div>
<script type="text/javascript" src="assests/js/todos.js"></script>
</body>
</html>