El cuadro de texto no se restablece

Tengo un cuadro de texto e intenté restablecerlo después de hacer clic en un botón. Pero no se está restableciendo. Script de HTML:

   1 a x Ce Td    

Código de JavaScript:

 var x; var option; var y; function add() { var x = document.getElementById('pre-selected-options'); console.log(x); var option = document.createElement("option"); option.text = document.getElementById("inp").value; var y = option.text x.add(option); $('#pre-selected-options').multiSelect('addOption', { value: y, text: y, index: 0, nested: 'optgroup_label' }); document.getElementById('pre-selected-options').reset(); } $('#pre-selected-options').multiSelect(); 

Traté de agregar esto y no está restableciendo el formulario:

 document.getElementById('pre-selected-options').reset(); 

El problema al que se enfrenta aquí es que está intentando borrar el cuadro de entrada con inp mientras llama a pre-selected-options , que no están conectadas a su cuadro de texto.

El uso de document.getElementById('inp').value = "" debería borrar el valor de su cuadro de texto.

Para restablecer un formulario, use

 form.reset(); 
 var form = document.querySelector('form'); var button = document.querySelector('button'); button.addEventListener('click', function() { form.reset(); }) 
 

Para borrar el valor del cuadro de entrada, use:

  document.getElementById('pre-selected-options').value = ""; 

https://www.w3schools.com/howto/howto_html_clear_input.asp

Para restablecer el formulario usando jQuery.

 $("form")[0].reset();