如何实现表格中Movie对象的添加及对应移除按钮功能？

我懂你现在的困境——表单和空表格都弄好了，能创建Movie对象插入表格，但就是不知道怎么给每行加个能同时删掉对应数组元素的按钮。别慌，我给你一步步拆解实现方法：

首先，先确认你的Movie类结构（假设是这样的，如果不一样可以调整）：

class Movie {
  constructor(title, year) {
    this.title = title;
    this.year = year;
    // 可选：加个唯一ID，避免同内容电影的移除冲突
    this.id = Date.now();
  }
}

接下来，我们需要一个数组存储所有Movie对象，然后在表单提交时创建对象、更新数组，同时渲染表格行和绑定移除逻辑。完整的代码示例如下：

window.onload = function(){ 
  // 获取DOM元素
  let frmMovies = document.getElementById("frmMovies"); 
  let txtTitle = document.getElementById("txtTitle"); 
  let txtYear = document.getElementById("txtYear");
  let movieTable = document.getElementById("movieTable"); // 替换成你的表格ID
  let movies = []; // 存储所有Movie对象的数组

  // 监听表单提交事件
  frmMovies.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止页面刷新的默认提交行为

    // 校验输入内容
    const title = txtTitle.value.trim();
    const year = txtYear.value.trim();
    if (!title || isNaN(year)) { // 简单校验：标题不为空，年份是数字
      alert("请输入有效的标题和年份");
      return;
    }

    // 创建新的Movie对象并加入数组
    const newMovie = new Movie(title, year);
    movies.push(newMovie);

    // 渲染新的表格行
    addMovieRowToTable(newMovie);

    // 清空表单输入
    txtTitle.value = '';
    txtYear.value = '';
  });

  // 渲染单个电影行的函数
  function addMovieRowToTable(movie) {
    // 创建表格行
    const row = document.createElement('tr');

    // 创建标题单元格
    const titleCell = document.createElement('td');
    titleCell.textContent = movie.title;
    row.appendChild(titleCell);

    // 创建年份单元格
    const yearCell = document.createElement('td');
    yearCell.textContent = movie.year;
    row.appendChild(yearCell);

    // 创建操作单元格和移除按钮
    const actionCell = document.createElement('td');
    const removeBtn = document.createElement('button');
    removeBtn.textContent = '移除';
    removeBtn.classList.add('remove-btn'); // 给按钮加样式类

    // 绑定移除事件：同时从数组和DOM中删除对应内容
    removeBtn.addEventListener('click', function() {
      // 用ID过滤数组（如果没加ID，就用movie对象本身判断：movies = movies.filter(m => m !== movie)）
      movies = movies.filter(m => m.id !== movie.id);
      // 从DOM中移除当前行
      row.remove();
    });

    actionCell.appendChild(removeBtn);
    row.appendChild(actionCell);

    // 把行添加到表格的tbody（推荐用tbody，规范表格结构）
    const tbody = movieTable.querySelector('tbody') || document.createElement('tbody');
    if (!movieTable.querySelector('tbody')) {
      movieTable.appendChild(tbody);
    }
    tbody.appendChild(row);
  }
};

// 你的Movie类（如果已经定义过就不用重复）
class Movie {
  constructor(title, year) {
    this.title = title;
    this.year = year;
    this.id = Date.now(); // 唯一ID，避免同内容电影的移除冲突
  }
}

关键逻辑说明： #

• 数组更新：用filter方法创建一个不包含当前电影的新数组，这样能保证数组数据的准确性，避免直接修改原数组带来的潜在问题。如果没有给Movie加唯一ID，直接用movies = movies.filter(m => m !== movie)也能工作，但加ID更严谨（比如两个完全一样的电影，用对象引用判断会误删，用ID就不会）。
• 按钮事件绑定：在创建按钮时直接绑定click事件，这样每个按钮都能关联到对应的Movie对象和表格行，点击时同时完成数组更新和DOM行删除。
• 表格结构规范：推荐使用<tbody>来存放表格行，这是HTML表格的标准结构，也方便后续的DOM操作。

额外小建议： #

可以把按钮的样式写到CSS里，而不是内联样式，方便统一管理：

.remove-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #c82333;
}

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