通过 /id json-server 删除 div

Posted 2023-03-27

【中文标题】通过 /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 - 嘿，只是想知道你对这个有什么想法。我刚刚开始重新拾起这个。

你明白了吗？我看到你在下面发布了一个答案..

【参考方案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);