JavaScript を使用してラベル入力ボックス機能を実装するにはどうすればよいですか?

// 获取标签输入框和标签容器元素 const input = document.getElementById('tag-input'); const container = document.getElementById('tag-container'); // 定义一个数组来存储用户输入的标签 let tags = []; // 监听键盘按下事件，回车键添加标签 input.addEventListener('keydown', function(event) { if (event.keyCode === 13) { const tag = input.value.trim(); // 检查标签是否已存在 if (tags.includes(tag)) { alert('该标签已存在，请输入其他标签'); } else if (tag !== '') { // 添加标签到数组 tags.push(tag); // 清空输入框并重新渲染标签 input.value = ''; renderTags(); } } }); // 渲染标签函数 function renderTags() { // 清空标签容器 container.innerHTML = ''; // 遍历标签数组，创建标签元素并加入容器 tags.forEach(function(tag) { const tagDiv = document.createElement('div'); tagDiv.innerText = tag; // 为每个标签添加一个删除按钮 const deleteButton = document.createElement('span'); deleteButton.innerText = 'x'; deleteButton.addEventListener('click', function(event) { // 获取被点击的标签的索引 const index = tags.indexOf(tag); // 从标签数组中删除该元素并重新渲染标签 tags.splice(index, 1); renderTags(); }); tagDiv.appendChild(deleteButton); container.appendChild(tagDiv); }); }