如何实现点击列表中的cell（单元格）即可将其删除的功能？

以下方案适配div模拟的列表单元格、table的td单元格，仅需要替换对应选择器即可使用。

原生JavaScript实现 #

• 静态列表直接给所有单元格绑定点击事件即可，示例代码：

// 替换.list-cell为你实际的单元格类名/标签选择器
const cells = document.querySelectorAll('.list-cell');
cells.forEach(cell => {
  cell.addEventListener('click', function() {
    this.remove();
  });
});

• 如果是动态生成的单元格，使用事件委托绑定到父容器，避免重复绑定事件：

// 替换.list-container为你实际的列表父容器选择器
const listContainer = document.querySelector('.list-container');
listContainer.addEventListener('click', function(e) {
  if(e.target.classList.contains('list-cell')) {
    e.target.remove();
  }
});

React 实现 #

通过状态管理列表数据，点击时过滤对应下标数据触发重渲染即可：

import { useState } from 'react';

function CellList() {
  const [listData, setListData] = useState(['单元格1', '单元格2', '单元格3']);

  const deleteCell = (index) => {
    setListData(prev => prev.filter((_, i) => i !== index));
  };

  return (
    <div className="list-container">
      {listData.map((item, index) => (
        <div 
          key={index} 
          className="list-cell"
          onClick={() => deleteCell(index)}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

Vue3 实现 #

通过响应式数据管理列表，点击时删除对应下标的数据即可：

<template>
  <div class="list-container">
    <div 
      v-for="(item, index) in listData" 
      :key="index"
      class="list-cell"
      @click="deleteCell(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const listData = ref(['单元格1', '单元格2', '单元格3']);

const deleteCell = (index) => {
  listData.value.splice(index, 1);
};
</script>

内容的提问来源于stack exchange，提问作者Sonia Trinidad