强制单击处理程序识别多个元素

Question

Basically, I want clicked divs to be hidden when I click a specific anchor tag inside the div. For whatever reason, this works for the first div and only this one. When I click the anchor tag in any other div, nothing happens. I don't even get a error in the console so I really just don't understand what I'm doing wrong.

Here's my code:

 document.querySelector(".closeWin").addEventListener("click", closeThisWin); function closeThisWin() { let winToClose = this.parentElement.parentElement; winToClose.style.display = "none"; console.log(winToClose); }

 .window { width: 210px; height: 110px; background-color: lightseagreen; text-align: center; margin: 6px auto; } .css { background-color: lightpink; } .s { font-size: 25px; padding: 40px 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="window"> <div class="s"> <a class="closeWin">Click Here 1</a> </div> </div> <div class="window css"> <div class="s"> <a class="closeWin">Click Here 2</a> </div> </div>

And Codepen: https://codepen.io/janaejpeg/pen/ExawWrm

I tried using jQuery but I didn't see any difference.

Answer 1

querySelector -> querySelectorAll

 document.querySelectorAll(".closeWin").forEach(function(a) { a.addEventListener("click", closeThisWin)}); function closeThisWin() { let winToClose = this.parentElement.parentElement; winToClose.style.display = "none"; console.log(winToClose); }

 .window { width: 210px; height: 110px; background-color: lightseagreen; text-align: center; margin: 6px auto; } .css { background-color: lightpink; } .s { font-size: 25px; padding: 40px 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="window"> <div class="s"> <a class="closeWin">Click Here 1</a> </div> </div> <div class="window css"> <div class="s"> <a class="closeWin">Click Here 2</a> </div> </div>