new to jQuery here. I am tasked with creating a remove button that deletes the new paragraph elements that I generate using jQuery. The user types in a movie and movie rating and I take that and append it to the screen along with a remove button. Upon clicking that remove button it should remove the recently added paragraph element. Unfortunately I am having trouble with this step.
$(".submit").on("click", function (e) {
e.preventDefault();
const movieVal1 = $(".movie1").val();
const movieVal2 = $(".movie2").val();
$("form")
.append($("<p>", { text: `${movieVal1}: ${movieVal2}` }))
.append("<button type='button' class='remove'>Remove</button>");
});
$(".remove").on("click", function () {
$(this).closets("p").remove();
});<!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.0">
<title>Document</title>
</head>
<body>
<form action="">
<label for="">Title: <input type="text" class='movie1' placeholder='Movie Title'></label>
<label for="">Rating: <input type="text" class='movie2' placeholder='Movie Rating'></label>
<button class= 'submit' type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="app.js"></script>
</body>
</html>I have tried $(this).parents along with $(this).closets('p') also instead of $(this) I tried ('.remove')
