如何用HTML和JavaScript实现商品分类管理功能

<div>
  <h3>分类管理</h3>
  <div>
    <h4>添加分类</h4>
    <input type='text' id='category-name' placeholder='请输入分类名称'>
    <button onclick='addCategory()'>添加</button>
  </div>
  <div>
    <h4>分类列表</h4>
    <ul id='category-list'></ul>
  </div>
</div>
<script>
// 定义分类列表
let categoryList = [];

// 获取分类列表元素
const categoryListElement = document.getElementById('category-list');

// 添加分类
function addCategory() {
  const categoryName = document.getElementById('category-name').value;
  if (categoryName) {
    categoryList.push(categoryName);
    renderCategoryList();
  }
}

// 渲染分类列表
function renderCategoryList() {
  categoryListElement.innerHTML = '';
  categoryList.forEach((category, index) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      ${category}
      <button onclick='deleteCategory(${index})'>删除</button>
    `;
    categoryListElement.appendChild(listItem);
  });
}

// 删除分类
function deleteCategory(index) {
  categoryList.splice(index, 1);
  renderCategoryList();
}

// 初始化页面
function init() {
  renderCategoryList();
}

init();
</script>
<p>该代码实现了一个简单的分类管理功能，包括添加分类、删除分类和展示分类列表。您可以根据自己的需求对代码进行修改和扩展。</p>