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）配置删除按钮

1 个答案: