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