使用 HTTP DELETE 请求 (JavaScript) 配置删除按钮

Question

我有一个删除按钮，可以成功删除DOM中的列表项。但是，它不会删除数据库中的项目，因此当刷新页面时，该项目会重新出现。此按钮在从数据库中检索时已在 HTTP GET 请求中动态生成。我必须将其放在其父 XHTTP 事件侦听器中的另一个函数中吗？

xhttp.open("GET", items_url, true);
xhttp.addEventListener('load', function(){
    var item_list= document.querySelector('#divShowItems');
    item_list.innerHTML = "";
    var items = JSON.parse(this.response);
    items.forEach(function(item){
        var title = document.createTextNode(item.title);
        var id = document.createTextNode(item.id);
        var li_item = document.createElement('li');
        li_item.appendChild(title);
        li_item.appendChild(id);
        var deleteBtn = document.createElement("button");
        deleteBtn.innerHTML = "Delete";
        book_item.appendChild(deleteBtn);
        deleteBtn.addEventListener("click", function(e){ 
            this.parentNode.parentNode.removeChild(this.parentNode); 
        });
    })

Answer 1

如果我

没看错，您就会问在哪里放置代码，这些代码将在单击按钮时向服务器发送HTTP DELETE请求。

您需要将其放在删除按钮的单击事件侦听器中，即

deleteBtn.addEventListener("click", function(e){
    // build and send http delete here
    this.parentNode.parentNode.removeChild(this.parentNode); 
});