Implementing an onclick event without JQuery

Question

I have a bit of JQuery in my app that adds a click event to a class. The click event just removes a class on the parent element.

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

This is the only use of JQuery in my entire application, so I'd love to re-write this snippet without JQuery so I can eliminate that as a dependency all together.

However, I'm not sure where to begin in terms of implementing this click even in native javascript. I don't know much about JavaScript and the little that I do know involves frameworks like JQuery and React.

Thanks!

querySelectorAll, addEventListener, classList. Learn how to use it, seems like a pretty basic task. — epascarello
– epascarello, Commented Jun 23, 2017 at 6:19
Thanks @epascarello - would you mind detailing that a bit further? I'm not sure how any of those are implemented. — user2490003
– user2490003, Commented Jun 23, 2017 at 6:20

prasanth · Accepted Answer · 2017-06-23 06:22:30Z

2

Try with querySelectorAll for select the element.Then classList.remove() use for remove the class name of the 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>

answered Jun 23, 2017 at 6:22

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2490003 Over a year ago

Perfect! Thank you :)

Dinesh K · Accepted Answer · 2017-06-23 06:23:33Z

1

You can take reference from the source below for your learning perspective https://www.w3schools.com/js/js_htmldom_eventlistener.asp

answered Jun 23, 2017 at 6:23

Dinesh K

6511 gold badge9 silver badges20 bronze badges

Comments

Andrei Todorut · Accepted Answer · 2017-06-23 06:25:30Z

0

Try this fiddle 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");
     });
}

answered Jun 23, 2017 at 6:25

Andrei Todorut

4,5762 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Implementing an onclick event without JQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related