Question

我正在尝试进行基本的待办事项清单练习。我可以从本地存储中获取待办事项并将其渲染，并且可以将它们从屏幕上删除，但是由于某种原因，我的deleteTodosFromStorage函数无法正常工作每次我重新加载页面时，都会得到删除的项目。我无法删除本地存储值。

这是我的html代码：

<body>
    <div class="container" style ="margin-top:20px;">
                                     
        <div class="card row">
            <div class="card-header">Todo List</div>
            <div class="card-body">
                    <form id = "todo-form" name="form">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <input class="form-control" type="text" name="todo" id = "todo" placeholder="Bir Todo Girin">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-danger">Todo Ekleyin</button>
                    </form>
                    
                    <hr>
                    
                    
                
             </div>
         
             <div class="card-body">
                    <hr>
                    <h5 class="card-title" id = "tasks-title">Todolar</h5>
                    <div class="form-row">
                            <div class="form-group col-md-6">
                                <input class="form-control" type="text" name="filter" id = "filter" placeholder="Bir Todo Arayın">
                            </div>
                    </div>

                    <hr>
                    <ul class="list-group">
                        <!-- <li class="list-group-item d-flex justify-content-between">
                            Todo 1
                            <a href = "#" class ="delete-item">
                                <i class = "fa fa-remove"></i>
                            </a>

                        </li>-->

                        
                    </ul>
                    <hr>  
                    <a id = "clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>               
                </div>
              </div>
        
    </div>


    
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="todo1.js"></script>
</body>
</html>

这是我的JS代码：

const list = document.querySelector(".list-group");
const todoInput = document.querySelector("#todo");
const cardBody = document.querySelectorAll(".card-body")[0];
const cardBody2 = document.querySelectorAll(".card-body")[1];


form.addEventListener("submit", addTodo);
document.addEventListener("DOMContentLoaded",loadTodosFromStorage);
cardBody2.addEventListener("click",deleteTodos);

function deleteTodos(e){

    if(e.target.className === "fa fa-remove"){
        e.target.parentElement.parentElement.remove();
        showAlert("success","Silme İşlmei Başarılı");
        deleteTodosFromStorage(e.target.parentElement.parentElement.textContent);

    }
}
function deleteTodosFromStorage(deletetodo){
    let todos = getTodosFromStorage();
    todos.forEach(function(todo,index){
        if(todo === deletetodo){
            todos.splice(index,1);          
        }
    });
    localStorage.setItem("todos", JSON.stringify(todos));
}

function loadTodosFromStorage(){
    let todos = getTodosFromStorage();
    todos.forEach(function(todo){
        addListItem(todo);
    })
}
function addTodo(e){
    const value = todoInput.value.trim();
    if (value === ""){
        showAlert("danger", "Lütfen Bir Değer Giriniz");
    }
    else {
        addListItem(value);
        showAlert("success", "Todo Girişi Başarılı!");
        AddTodosToStorage(value);
    }
    e.preventDefault();
}
function getTodosFromStorage(){
    let todos;
    if(localStorage.getItem("todos")=== null){
        todos = [];
    }
    else{
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    return todos;
}
function AddTodosToStorage(value){
    let todos = getTodosFromStorage();
    todos.push(value);
    localStorage.setItem("todos",JSON.stringify(todos));
}
function showAlert(type, message){

    const alert = document.createElement("div");
    alert.className = `btn btn-${type}`
    alert.textContent = message;
    cardBody.appendChild(alert);
    setTimeout(() => {
        alert.remove();
    }, 1500); 
}
function addListItem(value){
    const li = document.createElement("li");
    li.className = "list-group-item d-flex justify-content-between";
    const a = document.createElement("a");
    a.href ="#";
    a.className ="delete-item"; 
    a.innerHTML =" <i class = 'fa fa-remove'></i>";
    li.appendChild(document.createTextNode(value));
    li.appendChild(a);
    list.appendChild(li);
    todoInput.value = "";
}

从本地存储中删除

0 个答案: