Как удалить класс в javascript?

Пользователь

от greyson , в категории: JavaScript , 9 месяцев назад

Как удалить класс в javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от francisco.friesen , 9 месяцев назад

@greyson 

Для удаления класса из элемента в JavaScript используйте метод classList.remove(). Пример:

1
2
const element = document.getElementById("myElement"); // выбираем элемент по id
element.classList.remove("myClass"); // удаляем класс "myClass" из элемента


Также мы можем удалить несколько классов одновременно:

1
2
const element = document.getElementById("myElement");
element.classList.remove("class1", "class2", "class3");


Если необходимо проверить, есть ли класс у элемента перед его удалением, мы можем использовать метод contains():

1
2
3
4
const element = document.getElementById("myElement");
if (element.classList.contains("myClass")) {
  element.classList.remove("myClass");
}


UPD: Если вы разрабатываете приложение React, то для удаления класса из элемента лучше использовать библиотеку classnames, которая предоставляет удобные возможности работы с классами. Пример без использования сторонних библиотек:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import React, { useState } from "react";

function MyComponent() {
  const [isActive, setIsActive] = useState(true);

  function toggleClass() {
    setIsActive(!isActive);
  }

  return (
    
      Click me
    
  );
}


Этот код добавляет или удаляет класс "inactive" в зависимости от статуса isActive. Обратите внимание, что мы используем тернарный оператор для создания условия присоединения класса.