Question

我想要发生的是当我点击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());
        });
    });

});

Answer 1

由于您在slideUp()元素上呼叫li，因此在回调内，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());
  });
});

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

1 个答案: