CODEWITHSUNDEEP
javascriptjquery
gabriel
gabriel

Reputation: 500

Using JS How to call click function once only which will be equivalent to .one jQuery

Hello could someone help me? I'm having trouble transforming this part of my code to JS:

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

I have it so far:

  const customSelectTrigger = document.querySelector(".custom-select-trigger");
  const customSelect = document.querySelector(".custom-select");
  function showOptions(e) {
    e.preventDefault();
    customSelect.classList.toggle("opened");
    e.stopPropagation();
  }

but I'm not able to do this part for javascript:

  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });

Upvotes: 1

Views: 46

Answers (1)

Always Helping
Always Helping

Reputation: 14570

Here is working code for to remove class opened from your custom select when you press anywhere in the DOM.

You need to use JS addEventListener and click function to do this.

To remove class from an element we can use .remove function and getting the classList of your element by querySelector which will .custom-select

Edit: If you just want to use the click function once only per DOM load. Then setting setting the args { once: true } will only invoke the function once.

I have recreated your example and its working.

Run snippet below.

//Getting HTML element
const htmlElement = document.querySelector("html");
 
//Getting element where to remove the class from
const customSelect = document.querySelector(".custom-select");

//Adding eventlistener to remove class opened from classList
htmlElement.addEventListener("click", function(e) {
  customSelect.classList.remove("opened");
  console.log('Class Removed')
  e.preventDefault();
 },{ once: true });
.opened {
  background-color: red;
}
<html>

<h3>
  Click anywhere on the DOM to remove class from Custom select
</h3>

<div class="custom-select opened">
  My Custom Select
</div>

</html>

Upvotes: 2

Related Questions