在没有JQuery的情况下实现onclick事件

Question

我在应用中添加了一点点击事件给类。 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"); 
    }); 
}