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, Aug 09 '22 at 12:44
I dont get it, I want to tag 'removeClass' but its adding jquery instead.. — Surge, Aug 09 '22 at 12:47
We can see that you tagged it with jQuery in the edit history... — , Aug 09 '22 at 12:48
`removeClass()` is a jQuery method; and is - frankly - a pointless tag to even try and add to a question, as nobody would follow such a specialist tag. Incidentally, since you haven't included font-awesome, you have an essentially empty ` — David Thomas, Aug 09 '22 at 12:48
A couple of people with editing privileges have removed it for you, just leave the tags as they are now since it's been sorted. — DBS, Aug 09 '22 at 12:49
I searched for "*javascript click outside div*" and "*javascript remove class*" and found plenty of answers to each part of your problem ... eg https://stackoverflow.com/questions/36695438/detect-click-outside-div-using-javascript, and https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript. Did you try that? — Don't Panic, Aug 09 '22 at 12:50

Vinicius Bazanella · Accepted Answer · 2022-08-09T13:10:26.943

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 09 '22 at 13:10

answered Aug 09 '22 at 12:50

Vinicius Bazanella

436
3
12

Thank you, but my main problem is that I can't remove the active class when I click outside from 'todo_input-field' – Surge Aug 09 '22 at 12:54
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' – Surge Aug 09 '22 at 13:58

Remove class when I click outside from a div, JavaScript

1 Answers1