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

【问题标题】：Configuring a delete button with HTTP DELETE request (JavaScript)使用 HTTP DELETE 请求 (JavaScript) 配置删除按钮
【发布时间】：2019-05-28 12:58:58
【问题描述】：

我有一个删除按钮，可以成功删除 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); 
        });
    })

【问题讨论】：

Must I put it放什么？按钮？得到请求？删除请求？您能否更清楚地重新表述您的问题？

标签： ajax http button xmlhttprequest http-delete

【解决方案1】：

如果我没听错，您是在询问将在单击相应按钮时向服务器发送 HTTP DELETE 请求的代码放在哪里。

你需要把它放在删除按钮的点击事件监听器中，即

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

【讨论】：