在没有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");
     });
}