Reset input with materialize.css und jQuery

Question

I want to clear an input field using

$('#test').val('');

The field itself getting cleared but the highlighting from Materialize.css stays like it's still filled.

https://codepen.io/anon/pen/vrPNKd

Using ...

$('#form')[0].reset();

... is no option for me. I only want to reset one single input field not the whole form.

Did anyone have an idea?

Thanks

// EDIT

Found a solution:

$('#test').val('').removeClass('valid');
M.updateTextFields();

Answer 1

You need to remove the class active from the label element next to your <input>:

$('#test').val('');
$('#test').next().removeClass('active');

The next method is used to select the <label> element as it is the immediately following sibling of the <input> element.