I have written fadeOut command in my JS code, in my to do list project but the fadeout is not working properly and showing error in google console?

Question

$("ul").on("click", "li", function(){
    $(this).toggleClass("completed");
});

//Deleting the todos: 
$("ul").on("click", "span", function(event){
    $(this).parent().fadeout(500,function(event){
        $(this).remove();
    });
    event.stopPropagation();
});

// Creating new todos

$("input[type='text']").keypress(function(event){
    if(event.which === 13){
        var todoText = $(this).val();
        $(this).val("");

        $("ul").append("<li><span>X </span>"+ todoText +"</li>");
    }
})

when I am clicking on span element for fadeout of task it is showing error in console. I have attached the picture of error it is showing!!

Answer 1

Typo in fadeOut and you should cache the parent in a car to be sure to have the expected "this"

$("ul").on("click", "li", function() {
  $(this).toggleClass("completed");
});

//Deleting the todos: 
$("ul").on("click", "span", function(e) {
  e.stopPropagation();
  const $parent  = $(this).closest("li");
  $parent.fadeOut(500, function(event) {
    $parent.remove();
  });
});

// Creating new todos

$("input[type='text']").keypress(function(event) {
  if (event.which === 13) {
    var todoText = $(this).val();
    $(this).val("");

    $("ul").append("<li><span>X </span>" + todoText + "</li>");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" />

<ul>
</ul>