Deleting entire li with a span doesn't work

Question

Deleting one entire li doesn't work after I put the fadeOut function.After I click the span(x) it should remove the li but after I inputed the fadeOut function it doesn't work.

//Check off specific Todos By Clickin
$("li").click(function(){
    $(this).toggleClass("completed");
});

//Click on X to delete Todo
$("span").click(function(event){
    $(this).parent().fadeOut(500,function(){
        $(this).remove();
    });
    event.stopPropagation();
});

#container {
    width:360px;
    margin:0 auto;
    border:2px solid grey;
}

.completed {
    color:gray;
    text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <title>Todo List</title>
    <link rel="stylesheet" type="text/css" href="assets/css/todos.css">
    <script type="text/javascript" src="assets/js/lib/jquery-3.3.1.slim.js"></script>

</head>
<body>

    <div id="container">
        <h1>To-Do List</h1>
        <input type="text">

        <ul>
            <li><span>X</span> Go to Potions Class</li>
            <li><span>X</span> Buy New Robes</li>
            <li><span>X</span> Visit hermione</li>
        </ul>
    </div>

    <script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>

Are you trying to remove the `span` or the `li`? Your current code removes the `li` and it works https://jsfiddle.net/5ws03h1m/ — Huangism, Feb 26 '18 at 14:30
while editing your snippet, turn out it works fine. Maybe missing jquery on source — Gerardo BLANCO, Feb 26 '18 at 14:31
replacing the source of jQuery with a cdn it works but with that jQuery source it doesn't — leobaz, Feb 26 '18 at 14:39
So... what's the issue here? You're not including jquery properly? — freedomn-m, Feb 26 '18 at 14:43
In your example why do you include jQuery 2.1.1 from a CDN and then jQuery 3.3.1 slim locally? — j08691, Feb 26 '18 at 14:44
Have a read of: http://importblogkit.com/2015/07/does-not-work/ Then add `$(function() { alert("jquery ok"); }` - do you get that alert? — freedomn-m, Feb 26 '18 at 14:44
@j08691 someone edited to add jquery correctly so that the snippet works. — freedomn-m, Feb 26 '18 at 14:44
Ok - the two jquery's are jquery2.1.1 (works) and jquery-3.3.1-*slim* (doesn't work). So the issue is that it works with **full** jquery but not **slim** jquery - so what's slim missing? Animations (ie `fadeOut`). — freedomn-m, Feb 26 '18 at 15:05

Deleting entire li with a span doesn't work

0 Answers0