如何解决基于Rails API的JS Fetch DELETE请求无响应问题？

我来帮你一步步梳理代码里的问题，以及对应的修复方案：

1. 事件绑定错误（无响应的核心原因） #

你在renderTrackCard里写的document.querySelector('div').addEventListener('click', removeTrack)存在两个致命问题：

• document.querySelector('div')只会选中页面上第一个div元素，后续动态生成的歌单卡片上的删除按钮根本没绑定到点击事件
• 每次渲染新卡片都会重复给第一个div绑定事件，会导致后续点击逻辑混乱

修复方案：
改用事件委托或者直接给当前卡片的删除按钮绑定事件（推荐后者，逻辑更清晰）：

const renderTrackCard = (trackObj) => {
  let trackCard = document.createElement('div')
  trackCard.className = 'card'
  trackCard.dataset.id = trackObj.id
  trackCard.innerHTML = `
  <p>${trackObj.title} - ${trackObj.artist} - Genre: ${trackObj.genre} 
  <button class="delete-btn" data-action="delete"> X </button></p>
  `
  // 给当前卡片的删除按钮单独绑定事件，同时传入id和卡片元素
  trackCard.querySelector('.delete-btn').addEventListener('click', () => removeTrack(trackObj.id, trackCard))
  main().appendChild(trackCard)
}

2. 删除函数中dataset.id获取错误 #

你的删除按钮（.delete-btn）并没有data-id属性，data-id是挂载在父级的trackCard上的。所以event.target.dataset.id拿到的是undefined，导致请求URL变成/tracks/undefined，后端找不到对应资源。

修复方案：
直接把id和卡片元素作为参数传给删除函数（就像上面的代码那样），避免通过事件目标层层查找，逻辑更可靠。

3. fetch的then方法使用错误 #

你写的.then(event.target.parentElement.remove())是直接执行了删除DOM的操作，完全没有等待fetch请求成功。then方法需要接收一个回调函数，应该在请求成功后再执行DOM删除：

function removeTrack(id, trackCard) {
  // 按钮不是表单提交按钮，不需要event.preventDefault()
  // clearTrackForm() 如果不是删除操作必需的逻辑，可以考虑移除
  fetch(`${BASE_URL}/tracks/${id}`, {
    method: "DELETE",
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
  .then(response => {
    if (!response.ok) throw new Error('删除请求失败')
    return response.json()
  })
  .then(() => {
    trackCard.remove() // 请求成功后再删除DOM元素
  })
  .catch(err => console.error('删除出错：', err)) // 加上错误捕获，方便调试
}

4. 后端控制器destroy方法缺失响应 #

当前你的后端destroy方法删除track后没有返回任何响应，前端fetch会收到空响应，可能导致后续处理异常。

修复方案：
补充RESTful规范的响应：

def destroy
  track = Track.find_by(id: params[:id])
  if track
    track.destroy
    head :no_content # 返回204无内容，符合DELETE请求的规范
  else
    head :not_found # 没找到对应track时返回404
  end
end

额外优化建议 #

• 去掉按钮上重复的id="delete-btn"，页面上的id必须唯一，动态生成卡片会导致多个相同id元素，违反HTML规范
• 保留fetch的catch块，方便在控制台查看请求失败的具体原因，快速定位问题

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