Estoy tratando de permitir que un usuario ingrese varias etiquetas y pueda eliminarlas de la matriz mediante el uso de un cuadro de texto, un ejemplo sería cómo stackoverflow le permite agregar etiquetas al hacer una pregunta, he podido agregar los valores a la matriz, sin embargo, recibo un error cuando ejecuto la función de eliminación. este es el javascript que he escrito a continuación:

 <script type="module"> import {getDatabase, ref, set, child, get} from "https://www.gstatic.com/firebasejs/9.6.6/firebase-database.js"; const db = getDatabase(); const ul = document.querySelector(".statementbox"); const input = ul.querySelector('.inputstate'); let tags = []; function createTag(){ //removing li tas before adding so there will be no duplication ul.querySelectorAll("li").forEach(li => li.remove()); tags.slice().reverse().forEach(tag =>{ let liTag = `<li>${tag} <i class="fas fa-times" onclick="remove(this,'${tag}')"></i> </li>`; ul.insertAdjacentHTML("afterbegin", liTag); //adding li inside ul tag }); } function remove(element, tag){ let index = tags.indexOf(tag); // getting removing tag index tags = [...tags.slice(0, index), ...tags.slice(index + 1)]; // removing the tag from the array console.log(tags); } function addTag(e){ if (e.key === "Enter") { let tag = e.target.value.replace(/\s+/g, ' '); //removing unwanted spaces from tag if (tag.length > 1 && !tags.includes(tag)) { //if tag length is greater than one and does not already exist tag.split(',').forEach(tag => {//splitting each tag from comma tags.push(tag); //adding tag to the array createTag(); }); } e.target.value = ""; } } input.addEventListener("keyup", addTag); </script>

No entiendo la causa del error porque investigué y la función no está dentro de otra función ni está vinculada a un script con src ni está envuelta dentro de otra función, intenté agregar remove() en un script separado y lo registró en la consola, sin embargo, cuando hago esto, mi matriz aparece en blanco.

Por favor, indique qué hacer, gracias de antemano.