Given the following html:
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message-error"></div>
</form>
</div>
Is there an easy way to reference the element of class "form__message" ? I know this is the only element of this class in this example, but potentially there could be more. So I was trying the following to remove the form__message-error CSS-properties:
$("#login .form__message").classList.add("form__message--error");
This, however, does not find the correct element, whereas the following works:
document.querySelector("#login").querySelector(".form__message").classList.remove("form__message--error");
I am looking for a jQuery alternative to the last statement.
You're mixing jQuery and DOM methods. The jQuery equivalent of .classList.add() is .addClass().
$("#login .form__message").addClass("form__message--error");
You don't need .find() with querySelector(), you can use the same selector as with jQuery:
document.querySelector("#login .form__message").classList.add("form__message--error");