在Django模板中实现JS：解决删除食材总是删第一个的问题

问题出在你没有给每个删除按钮绑定对应食材的唯一标识，导致JS触发删除时只能找到列表里的第一个元素。下面是具体的修复方案：

方案一：直接传递食材信息到弹窗函数 #

在模板循环渲染食材时，把当前食材的名称（或ID）作为参数传给弹窗函数：

{% for ingredient in ingredients %}
  <div class="ingredient-item">
    <span>{{ ingredient }}</span>
    <button onclick="confirmDelete('{{ ingredient }}')">删除</button>
  </div>
{% endfor %}

<script>
function confirmDelete(ingredient) {
  if (confirm('确定要删除该食材吗？')) {
    // 找到对应食材的DOM元素并移除
    const allItems = document.querySelectorAll('.ingredient-item');
    allItems.forEach(item => {
      if (item.textContent.includes(ingredient)) {
        item.remove();
      }
    });
    // 如需同步后端删除，添加AJAX请求（记得带CSRF Token）
    // const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    // fetch(`/delete-ingredient/${ingredient}/`, {
    //   method: 'POST',
    //   headers: { 'X-CSRFToken': csrfToken }
    // });
  }
}
</script>

方案二：使用事件委托（更优雅，推荐） #

不用给每个按钮单独绑定事件，通过父容器统一监听点击事件，利用data属性存储食材信息：

<!-- 给列表容器加一个ID -->
<div id="ingredients-container">
  {% for ingredient in ingredients %}
    <!-- 用data属性存储当前食材 -->
    <div class="ingredient-item" data-ingredient="{{ ingredient }}">
      <span>{{ ingredient }}</span>
      <button class="delete-btn">删除</button>
    </div>
  {% endfor %}
</div>

<script>
// 监听父容器的点击事件
document.getElementById('ingredients-container').addEventListener('click', function(e) {
  // 判断点击的是删除按钮
  if (e.target.classList.contains('delete-btn')) {
    // 找到当前食材的父容器
    const item = e.target.closest('.ingredient-item');
    const ingredient = item.dataset.ingredient;
    
    if (confirm('确定要删除该食材吗？')) {
      // 删除DOM元素
      item.remove();
      // 后端删除的AJAX请求示例
      // const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
      // fetch(`/delete-ingredient/${ingredient}/`, {
      //   method: 'POST',
      //   headers: { 'X-CSRFToken': csrfToken }
      // });
    }
  }
});
</script>

注意事项 #

• 如果食材可能重名，建议用数据库ID替代名称作为标识，比如data-ingredient-id="{{ ingredient.id }}"，后端也通过ID删除更可靠。
• 后端删除时必须处理CSRF Token，否则Django会拒绝请求，模板里记得保留{% csrf_token %}标签。

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