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

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

Configuring a delete button with HTTP DELETE request (JavaScript)

ajax

http

xmlhttprequest

button

http-delete