在沒有JQuery的情況下實現onclick事件

Question

我的應用程序中有一些JQuery，它將click事件添加到類中。 click事件只會刪除父元素上的類。

$(function(){
  $(".flash .close").on("click", function(){
    $(this).parent().removeClass("active");
  })
});

這是JQuery在整個應用程序中的唯一用法，因此我很想在沒有JQuery的情況下重新編寫此代碼段，因此可以將其作為依賴項一起消除。

但是，即使在本機javascript中，我也不確定在實現此點擊方面應該從哪里開始。 我對JavaScript不太了解，而我所了解的很少涉及JQuery和React之類的框架。

謝謝！

Answer 1

嘗試使用querySelectorAll選擇元素。 classList.remove()用於刪除parentElement的類名稱。

 window.onload=function(){ document.querySelectorAll(".flash , .close").forEach(function(a){ a.addEventListener("click", function(){ this.parentElement.classList.remove("active"); }) }) } 

 .active{ color:red; } 

 <div class="active"> <a class="flash">hi</a> </div> 

Answer 2

您可以從下面的參考資料中獲取學習角度的參考：https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Answer 3

試試這個小提琴https://jsfiddle.net/z6uopyhy/1/

var flashCloseButton = document.getElementsByClassName('close');

for(var i = 0; i < flashCloseButton.length; i++){
     flashCloseButton[i].addEventListener("click", function(e) {
                    this.parentElement.classList.remove("active");
     });
}