通过 /{id} json-server 删除 div
Delete div by /{id} json-server
我写了一个 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,将不胜感激!
我通过更改我在点击时访问 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);
}
我写了一个 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,将不胜感激!
我通过更改我在点击时访问 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);
}