Question

我很困惑，我发誓我一定想念一些简单的事情，因为这对我来说目前没有任何意义。

展望未来，我正在寻求从项目中删除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时更改了我不知道的某些东西吗？

Answer 1

:invalid CSS伪类表示内容无法验证的任何元素或其他元素。默认情况下，只要表单或输入无效，就添加该类。您无法更改此行为。但是，您可以覆盖它：

input:invalid {
  background-color: blue;
}

此伪类对于突出显示用户的字段错误很有用。

Answer 2

<!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>

您可以在这里看到我的示例。我添加删除没有任何问题。因此，这不是因为动态添加了类而引起的错误，这是“无效”类（表单字段的自动类）的问题。

建议：为您的目的使用其他类别

无法删除动态添加的类

2 个答案: