Настройка кнопки удаления с запросом HTTP DELETE (JavaScript) - PullRequest
Новая
       29

Настройка кнопки удаления с запросом HTTP DELETE (JavaScript)

0 голосов
/ 01 января 2019

У меня есть кнопка удаления, которая успешно удаляет элемент списка в 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); 
        });
    })

1 Ответ

0 голосов
/ 02 января 2019

Если я вас правильно понял, вы спрашиваете, куда поместить код, который будет отправлять запрос HTTP DELETE на сервер при нажатии соответствующей кнопки.

Он должен быть внутри прослушивателя событий нажатия кнопки удаления, т.е.

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