如何在删除搜索栏中的值的同时更新表？

<input type="text" id="searchInput" />
<button id="deleteButton">删除</button>
<table id="dataTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据行 -->
  </tbody>
</table>

// 获取DOM元素
const searchInput = document.getElementById('searchInput');
const deleteButton = document.getElementById('deleteButton');
const dataTable = document.getElementById('dataTable');

// 监听删除按钮点击事件
deleteButton.addEventListener('click', () => {
  // 获取搜索栏的值
  const searchValue = searchInput.value;

  // 清空搜索栏的值
  searchInput.value = '';

  // 更新表格数据
  updateTable(searchValue);
});

// 更新表格数据的函数
function updateTable(searchValue) {
  // 根据搜索栏的值进行数据过滤或查询
  const filteredData = /* 根据搜索栏的值进行数据过滤或查询的逻辑 */;

  // 清空表格数据
  dataTable.innerHTML = '';

  // 遍历过滤后的数据，生成表格行并插入表格
  filteredData.forEach(data => {
    const row = document.createElement('tr');
    // 创建表格单元格并设置内容
    const cell1 = document.createElement('td');
    cell1.textContent = data.column1;
    row.appendChild(cell1);

    const cell2 = document.createElement('td');
    cell2.textContent = data.column2;
    row.appendChild(cell2);

    const cell3 = document.createElement('td');
    cell3.textContent = data.column3;
    row.appendChild(cell3);

    dataTable.appendChild(row);
  });
}