Как удалить класс на чистом JavaScript?

Question

[Игорь Гула]

Вот код, но класс не удаляется и пишется ошибка document.getElementByClass is not a function, в чем может быть проблема?

function myFunction() {
var element = document.getElementsByClassName("mystyle");
element.classList.remove("mystyle");
}
myFunction();

<div class="mystyle"></div>

Answer 1

[Il'ia Kartovitskii]

getElementsByClassName

Элементов с этим классом может быть и несколько, так что не забываем про индекс
document.getElementsByClassName("mystyle")[0]

Comments

[Игорь Гула]

Теперь пишет Uncaught TypeError: Cannot read property 'classList' of undefined

[Il'ia Kartovitskii]

У тебя элемент с указанным классом существует на странице?

[Игорь Гула]

Il'ia Kartovitskii,

<div class="mystyle">
</div>

[Il'ia Kartovitskii]

Помести вызов функции сюда:

window.onload = function() {
   myFunction();
};

или через обработчик DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
   myFunction();
}, false);

[Игорь Гула]

Il'ia Kartovitskii,

function myFunction() {
  var element = document.document.getElementsByClassName("mystyle")[0];
  element.classList.remove("mystyle");
}
document.addEventListener('DOMContentLoaded', function() {
   myFunction();
}, false);

<div class="mystyle">
</div>

Сделал так, теперь пишет Cannot read property 'getElementsByClassName' of undefined
at myFunction

[Il'ia Kartovitskii]

Игорь Гула, приведи пример всей страницы, где у тебя выполняется этот код

[Игорь Гула]

Il'ia Kartovitskii, Обычный html код где тренируюсь, кроме div=mystyle больше в body ничего нет.

[Il'ia Kartovitskii]

Игорь Гула, у тебя document.document дублируется

[Игорь Гула]

Il'ia Kartovitskii, Спасибо, помогло наконец-то! Выходит

document.addEventListener('DOMContentLoaded', function() {
   myFunction();
}, false);

нужно всегда ставить чтоб заработала функция?

[Il'ia Kartovitskii]

Игорь Гула, не всегда, почитай про DOM, как работает порядок загрузки страницы

Не забудь решением ответ отметить :)

[Aetae]

Игорь Гула, js код выполянеется сразу как он прилетел с сервера(и распарсился). Если твой
<script> стоит в теле html выше чем <div class="mystyle"> то он выпонится раньше чем <div class="mystyle"> вообще появится и, само собой, оного не найдёт. Код решения откладывает выпонение до загрузки страницы: onload - вместе с картинками и прочим медиа, DOMContentLoaded только html кода. Откладывать таким образом код удобно, но можно просто поместить <script> после <div class="mystyle"> и тогда тоже всё будет работать.

Там ещё много тонкостей, но с ними разберёшься по ходу дела.

Answer 2

[Сергей Соколов]

const className = "mystyle";
const els = document.getElementsByClassName(className);
while (els.length > 0) els[0].classList.remove(className);

Comments

[Игорь Гула]

всё равно не работает(

[Сергей Соколов]

Игорь Гула, да все работает:

[Il'ia Kartovitskii]

Сергей Соколов, я думаю, что у него элемент в DOM, находятся ниже, чем сам скрипт и он попросту выполняется, пока элемента еще не существует

Answer 3

[Nwton]

Простой вариант:

function delete_class_by_name(class_name)
{
	let element = document.querySelector('.' + class_name);
  
	if (element) element.classList.remove(class_name);
}

delete_class_by_name('mystyle');

Удаляет классы по имени со всех элементов с классом:

function delete_all_class_by_name(class_name)
{
	let elements = document.querySelectorAll('.' + class_name);
  
	elements.forEach(function(element){
  
  	element.classList.remove(class_name);
    
  });
}

delete_all_class_by_name('mystyle');

Comments

[Игорь Гула]

Пишет Cannot read property 'classList' of null
at delete_class_by_name

[Nwton]

Игорь Гула, это значит, что не удалось найти элемент по классу. Вероятно вы запускаете функцию до загрузки всего документа или неверно указываете имя класса. У меня все работает: https://jsfiddle.net/9cy5wh3t/1/