Не удается удалить динамически добавленный класс - PullRequest
Новая
       0

Не удается удалить динамически добавленный класс

0 голосов
/ 01 ноября 2019

Я в замешательстве, клянусь, я, должно быть, упускаю что-то простое, так как в настоящее время это не имеет никакого смысла для меня.

В будущем я собираюсь удалить jQuery из проектов, похоже, это такдолжно быть самой простой из задач, но для жизни я не могу понять это.

Я добавил класс к элементу, который я не могу удалить.

Примечание: form-input добавляется в разметку и invalid добавляется динамически 

const telephoneInput = document.querySelector('#form-telephone');

console.log(telephoneInput.classList); // DOMTokenList [ "form-input", "invalid" ]

telephoneInput.classList.remove('invalid');

console.log(telephoneInput.classList); // DOMTokenList [ "form-input" ]

Из этого обновляется DOMTokenList / classList, однако DOM нет, класс и его эффекты все еще присутствуют.

Элемент в DOM после запуска вышеупомянутого: <input name="form-telephone" id="form-telephone" class="form-input invalid" type="tel">

Теперь, если я изменю предыдущий тест, чтобы удалить класс, который был добавлен в исходную разметку form-input, он будет работать как ожидалось. .. 

const telephoneInput = document.querySelector('#form-telephone');

console.log(telephoneInput.classList); // DOMTokenList [ "form-input", "invalid" ]

telephoneInput.classList.remove('form-input');

console.log(telephoneInput.classList); // DOMTokenList [ "invalid" ]

После этого DOMTokenList / classList снова обновляется, на этот раз также DOM.

Элемент в DOM после запуска выше: <input name="form-telephone" id="form-telephone" class="invalid" type="tel">

Я что-то здесь упускаю, это добавление класса invalid changinЧто-то, о чем я не знаю?

Ответы [ 2 ]

0 голосов
/ 01 ноября 2019 

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
  width: 300px;
  height: 50px;
  background-color: coral;
  color: white;
  font-size: 25px;
}
</style>
</head>
<body>

<p>Click the button to add the "mystyle" class to DIV.</p>

<button onclick="myFunction()">add</button>
<button onclick="myFunction1()">remove</button>

<p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="myDIV">
I am a DIV element
</div>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.add("mystyle");
}
function myFunction1() {
  document.getElementById("myDIV").classList.remove("mystyle");
}
</script>

</body>
</html>

Вы можете увидеть мой пример здесь. Я добавляю удаление без проблем. Так что это не ошибка из-за динамически добавленного класса, это проблема с «недопустимым» классом, который является автоклассом для полей формы.

Предложение: используйте другой класс для вашей цели

0 голосов
/ 01 ноября 2019

CSS-псевдокласс :invalid представляет любой или другой элемент, содержимое которого не может быть проверено. Класс добавляется по умолчанию всякий раз, когда форма или ввод недопустимы. Вы не можете изменить это поведение. Но вы можете переопределить его: 

input:invalid {
  background-color: blue;
}

Этот псевдокласс полезен для выделения ошибок поля для пользователя.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...