为什么.remove(）在回调函数中不起作用

Why is the .remove() not working inside the callback function?

本文关键字：函数不起作用回调 remove 为什么更新时间：2023-09-26

我想要的是，当我单击x按钮时，当slideUp（）方法完成时，该项目将被删除。但是使用下面的代码，它会一次删除所有项目，当我刷新页面时，它上面有未定义的内容。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Todo List</title>
        <!-- CSS -->
        <link rel="stylesheet" href="styles.css">
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>Things I've Gotta Get Done</h1>
            <ul id="list-items">
            <!-- Here's where out todo list items will go! -->
            </ul>
            <form class="add-items">
                <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?">
                <button class="add" type="submit">Add to List</button>
            </form>
        </div>
    </body>
</html>

CSS

.container {
    margin: 0 auto;
    min-width: 500px;
    width: 45%;
    text-align: left;
    color: #3b3b3b;
    font-weight: bold;
    font-family: 'Helvetica', 'Arial', sans-serif;
}
form {
    outline: 0;
    height: 36px;
    margin-top: 5%;
    border: 3px solid #3b3b3b;
}
input[type="text"] {
    outline: 0;
    width: 55%;
    height: 32px;
    border: none;
    font-size: 18px;
    font-weight: normal;
    padding-left: 10px;
}
.add {
    outline: 0;
    float: right;
    width: 34%;
    height: 36px;
    color: #fff;
    font-size: 18px;
    border: none;
    cursor: pointer;
    background-color: #3b3b3b;
}
ul {
    padding: 0;
    text-align: left;
    list-style: none;
}
hr {
    border-bottom: 0;
    margin: 15px 0;
}
input[type="checkbox"] {
    width: 30px;
}
.remove {
    float: right;
    cursor: pointer;
}
.completed {
    text-decoration: line-through;
}

JS-

$(document).ready(function () {
    $("#list-items").html(localStorage.getItem("listItems"));
    $(".add-items").submit(function(event) {
        event.preventDefault();
        var item = $.trim( $("#todo-list-item").val() );
        if (item.length > 0) {
            if (item === "exercise" || item === "EXERCISE" || item === "Exercise"){
                $("#list-items").append("<li><input class='checkbox' type='checkbox' /><img src='assets/images/exercise.gif' alt='exercise'><a class='remove'>x</a><hr></li>");
                localStorage.setItem("listItems", $("#list-items").html());
                $("#todo-list-item").val("");
            } else {
                $("#list-items").append("<li><input class='checkbox' type='checkbox' />" + item + "<a class='remove'>x</a><hr></li>");
                localStorage.setItem("listItems", $("#list-items").html());
                $("#todo-list-item").val("");                
            }
        }  
    });
    $(document).on("change", ".checkbox", function() {
        if ($(this).attr("checked")) {
            $(this).removeAttr("checked");
        } else {
           $(this).attr("checked", "checked"); 
        }
        $(this).parent().toggleClass("completed");
        localStorage.setItem("listItems", $("#list-items").html());
    });
    $(document).on("click", ".remove", function() {
        $(this).parent().slideUp("slow", function() {
            $(this).parent().remove();
            localStorage.setItem("listItems", $("#list-items").html());
        });
    });
});

由于您在li元素上调用slideUp()，在回调中，this指的是li元素，所以当您说$(this).parent().remove()时，它正在删除ul元素，这就是为什么所有元素都被删除的原因。

因此，您可以删除this引用的元素，无需调用.parent()

$(document).on("click", ".remove", function() {
  $(this).parent().slideUp("slow", function() {
    $(this).remove();
    localStorage.setItem("listItems", $("#list-items").html());
  });
});