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

Question

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

我已经在此处上传了我的代码： https://codesandbox.io/s/json-server-i5hv5

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

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

努力完成这项工作。

我只想删除我点击的div。我只希望 div 在数据库中被删除，因为它被分配 id={id}.

这是有问题的点击功能：

 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);
    }
  });

如有approaches/tips，将不胜感激！

Answer 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);
  }

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

Delete div by /{id} json-server

javascript

rest

crud

http-delete

json-server