jQuery timed animation on click

Question

I'm trying to get the checkmark loading animation to happen only when the .closest() .yay button is clicked . I found the animation but can't work it into my function where it only runs on click and for more than one instance.

https://codepen.io/moofawsaw/pen/Qrxbxj

 (function() { $(document).ready(function() { return $(".delete-confirm").each(function() { var $this; $this = $(this); $("button.delete", $this).click(function() { $(this).toggleClass("confirm"); }); return $("button.yay, button.nay", $this).click(function() { return $("button.delete", $this).removeClass("confirm"); }); }); }); }.call(this)); $(".yay").click(function() { ele = this; setTimeout(function() { $(ele) .closest(".post") .remove(); }, 1500); }); const yay = document.querySelector(".yay"); const submit = document.querySelector(".submit"); function toggleClass() { this.classList.toggle("active"); } function addClass() { this.classList.add("finished"); } yay.addEventListener("click", toggleClass); yay.addEventListener("transitionend", toggleClass); 

 body { display: flex; } .post { border: 2px solid; margin: 15%; } .delete-confirm { border: 2px solid; position: relative; display: inline-block; } .delete-confirm button { position: relative; display: flex; align-items: center; justify-content: center; font-size: 11px; height: 25px; width: 25px; min-width: 25px; text-align: center; cursor: pointer; background-color: #e90000; color: white; border: none; border-radius: 50%; } .delete-confirm button.delete { z-index: 3; transition: all 0.2s ease 0.1s; } .delete-confirm button.delete.confirm { background-color: transparent; color: #262a2c; transition: all 0.2s ease 0.2s; z-index: 0; } .delete-confirm button.delete.confirm~button.yay, .delete-confirm button.delete.confirm~button.nay { visibility: visible; color: white; transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s; } .delete-confirm button.delete.confirm~button.yay { -webkit-transform: translate(0, -250%); transform: translate(0, -250%); background-color: #6fbd1b; } .delete-confirm button.delete.confirm~button.nay { -webkit-transform: translate(0, -130%); transform: translate(0, -130%); background-color: #e90000; } .delete-confirm button.yay, .delete-confirm button.nay { position: absolute; top: 0; color: #262a2c; visibility: hidden; z-index: 1; transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease; } .delete-confirm button.yay:focus { transition-delay: 2s; } .delete-confirm button.yay { left: 0; } .delete-confirm button.nay { right: 0; } .delete-confirm button:focus { outline: none; } .yay:before { position: absolute; content: ''; bottom: 0; left: 0; width: 0%; height: 100%; } .yay span { position: absolute; line-height: 0; } .yay span i { transform-origin: center center; } .yay span:nth-of-type(1) { top: 50%; transform: translateY(-50%); } .yay span:nth-of-type(2) { top: 100%; transform: translateY(0%); } .active:before { width: 100%; transition: width 500ms linear; } .active span:nth-of-type(1) { top: -100%; transform: translateY(-50%); } .active span:nth-of-type(2) { top: 50%; transform: translateY(-50%); } .active span:nth-of-type(2) i { animation: loading 500ms linear infinite; } @keyframes loading { 100% { transform: rotate(360deg); } } @keyframes scale { 0% { transform: scale(10); } 50% { transform: scale(0.2); } 70% { transform: scale(1.2); } 90% { transform: scale(0.7); } 100% { transform: scale(1); } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="post">Post1 <div class='delete-confirm'> <button class='delete'> <i class='fa fa-trash-o fa-lg'></i> </button> <button class='yay'> <span class="submit"><i class='fa fa-check'></i></span> <span class="loading"><i class="fa fa-refresh"></i></span> </button> <button class='nay'> <i class='fa fa-close'></i> </button> </div> </div> <div class="post">Post2 <div class='delete-confirm'> <button class='delete'> <i class='fa fa-trash-o fa-lg'></i> </button> <button class='yay'> <span class="submit"><i class='fa fa-check'></i></span> <span class="loading"><i class="fa fa-refresh"></i></span> </button> <button class='nay'> <i class='fa fa-close'></i> </button> </div> </div> 

Answer 1

This is because document.querySelector returns only one element.

You could use document.querySelectorAll but I'm not sure how to bind events then.

Simple solution is to use jQuery since you're using it anyway.

...
const yay = $(".yay");
yay.on("click", toggleClass);
yay.on("transitionend", toggleClass);

 (function() { $(document).ready(function() { return $(".delete-confirm").each(function() { var $this; $this = $(this); $("button.delete", $this).click(function() { $(this).toggleClass("confirm"); }); return $("button.yay, button.nay", $this).click(function() { return $("button.delete", $this).removeClass("confirm"); }); }); }); }.call(this)); $(".yay").click(function() { ele = this; setTimeout(function() { $(ele) .closest(".post") .remove(); }, 1500); }); const yay = $(".yay"); const submit = document.querySelector(".submit"); function toggleClass() { this.classList.toggle("active"); } function addClass() { this.classList.add("finished"); } yay.on("click", toggleClass); yay.on("transitionend", toggleClass); 

 body { display: flex; } .post { border: 2px solid; margin: 15%; } .delete-confirm { border: 2px solid; position: relative; display: inline-block; } .delete-confirm button { position: relative; display: flex; align-items: center; justify-content: center; font-size: 11px; height: 25px; width: 25px; min-width: 25px; text-align: center; cursor: pointer; background-color: #e90000; color: white; border: none; border-radius: 50%; } .delete-confirm button.delete { z-index: 3; transition: all 0.2s ease 0.1s; } .delete-confirm button.delete.confirm { background-color: transparent; color: #262a2c; transition: all 0.2s ease 0.2s; z-index: 0; } .delete-confirm button.delete.confirm~button.yay, .delete-confirm button.delete.confirm~button.nay { visibility: visible; color: white; transition: all 0.25s ease, visibility 0, background-color 0.3s ease 0.2s; } .delete-confirm button.delete.confirm~button.yay { -webkit-transform: translate(0, -250%); transform: translate(0, -250%); background-color: #6fbd1b; } .delete-confirm button.delete.confirm~button.nay { -webkit-transform: translate(0, -130%); transform: translate(0, -130%); background-color: #e90000; } .delete-confirm button.yay, .delete-confirm button.nay { position: absolute; top: 0; color: #262a2c; visibility: hidden; z-index: 1; transition: all 0.5s ease, visibility 0.5s, background-color 0.3s ease; } .delete-confirm button.yay:focus { transition-delay: 2s; } .delete-confirm button.yay { left: 0; } .delete-confirm button.nay { right: 0; } .delete-confirm button:focus { outline: none; } .yay:before { position: absolute; content: ''; bottom: 0; left: 0; width: 0%; height: 100%; } .yay span { position: absolute; line-height: 0; } .yay span i { transform-origin: center center; } .yay span:nth-of-type(1) { top: 50%; transform: translateY(-50%); } .yay span:nth-of-type(2) { top: 100%; transform: translateY(0%); } .active:before { width: 100%; transition: width 500ms linear; } .active span:nth-of-type(1) { top: -100%; transform: translateY(-50%); } .active span:nth-of-type(2) { top: 50%; transform: translateY(-50%); } .active span:nth-of-type(2) i { animation: loading 500ms linear infinite; } @keyframes loading { 100% { transform: rotate(360deg); } } @keyframes scale { 0% { transform: scale(10); } 50% { transform: scale(0.2); } 70% { transform: scale(1.2); } 90% { transform: scale(0.7); } 100% { transform: scale(1); } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="post">Post1 <div class='delete-confirm'> <button class='delete'> <i class='fa fa-trash-o fa-lg'></i> </button> <button class='yay'> <span class="submit"><i class='fa fa-check'></i></span> <span class="loading"><i class="fa fa-refresh"></i></span> </button> <button class='nay'> <i class='fa fa-close'></i> </button> </div> </div> <div class="post">Post2 <div class='delete-confirm'> <button class='delete'> <i class='fa fa-trash-o fa-lg'></i> </button> <button class='yay'> <span class="submit"><i class='fa fa-check'></i></span> <span class="loading"><i class="fa fa-refresh"></i></span> </button> <button class='nay'> <i class='fa fa-close'></i> </button> </div> </div>