Remove class when I click outside from a div, JavaScript

Question

I would like to ask how can I remove the 'active' class from 'todo_input_container' if I click outside from 'todo_input-field'? And also I would like to ask why this transation scale is not working properly when I click on the 'add_btns'? I tried to solve it with javascript, but didn't work eiter

const add_btns = document.querySelectorAll('.todo-container .add_btn');
const todo_input_container = document.querySelector('.todo_input-container');

add_btns.forEach(e => {
    e.addEventListener('click', () => {
        todo_input_container.classList.add('active');        
    })
})

.todo_input-container {
  display: none;
  transform: scale(0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  transition: .4s ease;
}

.todo_input-container.active {
  display: block;
  transform: scale(1);
}

<div class="todo-container">
  <button class="add_btn">
    <i class="fa-solid fa-plus"></i>
  </button>
</div> 

<div class="todo_input-container">
  <div class="todo_input-field">
    <form>
      <input class="todo_input-heading" type="text">
      <textarea id="todo_text" name="message" class="todo_text" rows="1" maxlength="30000"></textarea>
      <div class="todo_input-submit">
        <button type="submit" id="submit_btn" class="add_btn">
          Add 
        </button>
      </div>
    </form>
  </div>
</div>

If you don't want jQuery, I'd really suggest not tagging the question with jQuery... — DBS
– DBS, Commented Aug 9, 2022 at 12:44
I dont get it, I want to tag 'removeClass' but its adding jquery instead.. — Surge
– Surge, Commented Aug 9, 2022 at 12:47
We can see that you tagged it with jQuery in the edit history... — user5734311
– user5734311, Commented Aug 9, 2022 at 12:48

Vinicius Bazanella · Accepted Answer · 2022-08-09 13:10:26Z

2

If your target element is an input you can try to listen to blur event.


todo_input_container.addEventListener('blur', () => {
  todo_input_container.classList.remove('active');
})

Also you can try to do it all with css:


.todo_input-container:focus {
  display: block;
  transform: scale(1);
}

EDIT

Since the main problem is listening the "click outside" event, you could listen to a click event on the document, or another div that contains your element. Then when you get a click, you check if its target is not the element you want:

const todoInputContainer = document.querySelector('.todo_input-container');

document.addEventListener('click', event => {
  if (event.target != todoInputContainer) {
    todoInputContainer.classList.remove('active');
  }
});

edited Aug 9, 2022 at 13:10

answered Aug 9, 2022 at 12:50

Vinicius Bazanella

5153 silver badges14 bronze badges

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

2 Comments

Surge Over a year ago

Thank you, but my main problem is that I can't remove the active class when I click outside from 'todo_input-field'

Surge Over a year ago

Thank you, I could figure it out and added onclick="event.stopPropagation()" to the 'todo_input-field' and removed the active class from the 'todo_input-container'

Collectives™ on Stack Overflow

Remove class when I click outside from a div, JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related