Как сделать чтобы при клике вне элемента у него удалялся класс?

Question

[Ratibor]

Доброе время суток! Как сделать чтобы при клике вне элемента у него удалялся класс? Вот код https://codepen.io/RatiboR1978/pen/mzOOwp при клики на .wrap добавляется active-text, после этого надо кликнуть вне элемента и класс active-text должен удалится. Не могу додуматься как сделать, подскажите решение.

Answer 1

[AngReload]

Мне проще сделать без JS

<div class="wrap">
  <input type="text" id="name-user">
  <label for="name-uzer">ФИО</label>
  <span>С больших букв</span>
</div>

input {
  display: block;
  width: 200px;
  border: none;
  font-size: 15px;
  border-bottom: 2px solid black;
}

.wrap {
  padding: 30px;
  position: relative;
  margin: 50px;
}

label {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 20px;
}

input:focus ~ label {
  font-size: 10px;
  top: 10px;
}

Comments

[Ratibor]

Спасибо, а вот на js https://codepen.io/RatiboR1978/pen/mzOOwp проблема в том что при вашем решении если нажимать на сам лабел то ни чего не произойдет а при моем решении сработает как надо.

[AngReload]

Ratibor, костыльно (как минимум не работает с переходом кнопкой Tab), лучше следить за специальными событиями — focus/blur

https://codepen.io/AngReload/pen/zmoZyV?editors=0110

https://learn.javascript.ru/focus-blur

Answer 2

[Ratibor]

вот на js https://codepen.io/RatiboR1978/pen/mzOOwp