Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

This course will introduce you to jQuery, a framework for building interactive web pages with animations, visual effects, and advanced functionality. You will start with a brief introduction to the course and jQuery. 

Next, you will explore the core concepts in jQuery, such as event-handling, animations, and in-browser manipulation of the document object model. 

Finally, you will learn about the AJAX framework in jQuery for dynamic content loading in web pages. On top of that, you will be working on an interactive project throughout the course with quizzes and challenges at the end of each chapter.

The Complete Guide to jQuery

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
  box-sizing: border-box;
}

body{
  background-image: linear-gradient(80deg,#96d1cd,#Dbe1f5);
  min-height: 100vh;
}

h3{
  margin: 10px 0;
}

#addTask{
  float: right;
  margin-right: 30px;
  margin-top: 10px;
  background: none;
  cursor: pointer;
  border: none;
  font-size: 25px;
}

.container{
  max-width: 800px;
  margin: auto;
  padding: 10px;
}

.textBox{
  width: 90%;
  border: none;
  border-bottom: 2px solid #000;
  background: none;
  padding: 10px;
  outline: none;
  font-size: 18px;
}

.task{
  width: 100%;
  background: rgba(255,255,255,0.5);
  padding: 18px;
  margin: 6px 0;
  overflow: hidden;
}

.task button{
  float: right;
  margin-left: 20px;
  cursor: pointer;
  border: none;
  font-size: 18px;
}



$(document).ready(function() {
    $("div").on("click", "#delete", function() {
        var taskToDelete = $(this).parent()
        taskToDelete.remove()
    });


    $("#addTask").click(function() { // click event handler
        if ($(".textBox").val() != "") {
            var taskElement = $("<div> </div>")
            taskElement.addClass("task")
            taskElement.text($(".textBox").val())

            var deleteBtnElement = $("<button id='delete'> </button>")
            deleteBtnElement.addClass("fas fa-trash-alt")

            var doneBtnElement = $("<button id='done'> </button>")
            doneBtnElement.addClass("fas fa-check")

            taskElement.append(deleteBtnElement, doneBtnElement)

            $(".notCompleted").append(taskElement)

            $(".textBox").val("") // clear out the text box
        } else {
            alert("Error: Please enter a task before clicking the 'Add' button.");
        }
    });
});

codemirror

## Explanation

* In **line 2**, we assign a click event handler to the delete button, a descendant of `div` with `id` equal to `delete`. We use the `on()` method here because the delete button is _dynamically created_ and the direct method `$("#delete").click()` won't work.

* In **line 3**, we extract the parent of the delete button, which is the task to be deleted. 

* In **line 4**, we delete that extracted parent element using the `remove()` method.



# Explanation

* In **line 2**, we assign a click event handler to the delete button, a descendant of `div` with `id` equal to `delete`. We use the `on()` method here because the delete button is _dynamically created_ and the direct method `$("#delete").click()` won't work.

* In **line 3**, we extract the parent of the delete button, which is the task to be deleted. 

* In **line 4**, we delete that extracted parent element using the `remove()` method.



# Explanation

* In **line 2**, we assign a click event handler to the delete button, a descendant of `div` with `id` equal to `delete`. We use the `on()` method here because the delete button is _dynamically created_ and the direct method `＄("#delete").click()` won't work.

* In **line 3**, we extract the parent of the delete button, which is the task to be deleted. 

* In **line 4**, we delete that extracted parent element using the `remove()` method.



This review provides a detailed explanation to solve the 'Deleting a Task from the To-Do List' challenge.

jQuery Basics

Events and Event Handlers

DOM Traversal and Manipulation

Effects and Animations

AJAX Methods

Conclusion

Solution Review: Deleting a Task from the To-Do List

Solution

Explanation