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

271
November 23, 2016, at 9:00 PM

What I want to happen is when I click the x button, the item will be removed when the slideUp() method is done. But with the code below, it will remove all the items at once and when I refresh the page, it has undefined on it.

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

Since you are calling slideUp() on the li element, Inside the callback, this refers to the the li element, so when you say $(this).parent().remove() it is removing the ul element that is why all the elements are removed.

So you can remove the element referred by this, no need to call .parent()

$(document).on("click", ".remove", function() {
  $(this).parent().slideUp("slow", function() {
    $(this).remove();
    localStorage.setItem("listItems", $("#list-items").html());
  });
});
Rent Charter Buses Company
READ ALSO
Show second checkbox if return value of first is true

Show second checkbox if return value of first is true

I got a question and I am also accepting to getting downvotes for this because I have not really tried something yet. The problem is I don't know how to name the problem and for what I should look for around the internet.

256
hide tracks in IE9 html5

hide tracks in IE9 html5

Here is my code:.

391
Use CSS translate transform with jquery draggable

Use CSS translate transform with jquery draggable

I create an example using an annotation with SVG image. .

625
Passing arrays js variable to php

Passing arrays js variable to php

Currently I have stored variables in a Javascript array. The goal here is to turn them into PHP variables so that I can use these variables and insert them into my database.

302