To Do List

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.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 Hagrid</li>
       </ul>
       
   </div>
    
    
   
    <script type="text/javascript" src="script.js"></script>
</body>

</html>

"use strict";

//Check off specific todos by licking.
//jQuery VERSION
$("li").click(function () {
    $(this).toggleClass("completed");
});

//JavaScript Version
/*var lis = document.querySelectorAll("li");

for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", function () {
        this.classList.toggle("completed")
    });
}*/

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


//JavaScript Version - DOESNT WORK!!!
/*var spans = document.querySelectorAll("span");
 
for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener("click", function () {
        this.parentElement.classList.add("fadeOut");
        setInterval(test(this), 90000);
        
    });
}
 
function test(event){
    console.log(event);
    event.parentElement.outerHTML = "";
};*/


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

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









/* STYLES FOR JS */
.fadeOut{
    opacity: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}