通过 /{id} json-server 删除 div答案

【问题标题】：Delete div by /{id} json-server通过 /{id} json-server 删除 div
【发布时间】：2019-12-12 00:30:43
【问题描述】：

我使用 JSON-Server 编写了一个 Todo 任务应用程序来管理 REST 路由。

我在这里上传了我的代码： https://codesandbox.io/s/json-server-i5hv5

我遇到的问题是，当我单击待办事项时，我只想从数据库中删除 {id} 的那个 DIV。

但是，删除功能只有在您单击最后添加的 div 时才有效。即使这样，它也会删除数据库中的所有 {id} 和页面上的 div，而不是我点击的单个 div。

努力完成这项工作。

我只想删除我点击的 div。而且我只希望通过分配id={id} 在数据库中删除该div。

这是有问题的点击功能：

 document.getElementById('id').addEventListener('click', function(event) 
 {
    event.preventDefault();
    console.log('clicked');

    var divs = document.querySelectorAll('div');
    for (var i = 0; i < divs.length; i++) {
      var id = divs[i].getAttribute('id');
      divs[i].parentElement.removeChild(divs[i]);
      fetchService.deleteTodoTask(id);
    }
  });

任何方法/提示，将不胜感激！

【问题讨论】：

我应该能够在那个链接上添加任务吗？
@lollmbaowtfidgafgtfoohwtbs 出于某种原因任务没有保存在该链接中，但它们在本地保存，我会看看
好吧，你的代码实际上是......删除那些 divs b/c 这就是你告诉它要做的事情。如果你不想为每个 div 都这样做，那么只为你想要的 1 个 div 做。你似乎在为他们所有人做这件事。删除 for 循环。
@lollmbaowtfidgafgtfoohwtbs - 嘿，只是想知道你对这个有什么想法。我刚刚开始重新拾起这个。
你明白了吗？我看到你在下面发布了一个答案..

标签： javascript rest crud http-delete json-server

【解决方案1】：

通过更改单击时访问 DOM 元素的方式，我得到了这个工作。下面的代码似乎运行良好。

我是他们在点击时将抓取的 ID 传递给 fetchService.deleteTodoTask(id)。
这是处理删除 REST 路由的位置：

    const list = document.querySelector('.js-todo-list');
    list.addEventListener('click', event => {

   if (event.target.classList.contains('js-delete-todo')) {
     const itemKey = event.target.parentElement.dataset.key;
     const id = itemKey;
     var elem = document.getElementById(id);
     elem.parentNode.removeChild(elem);
     fetchService.deleteTodoTask(id);
   }
 });


  function deleteTodoTask(id) {
    const options = {
      method: 'DELETE'
    };
    return fetch(`${url}/${id}`, options);
  }

【讨论】：