How to I perform a delete request one item at a time using Axios?

Question

So, I am building a basic to-do list app using a to-do list api and I am having trouble figuring out how to delete one to-do at a time when the user clicks a delete button. I am using the id# that gets created for a new todo that is made.

I thought the code I currently have would work, but nothing happens when I click the delete button.

Any insights into what I am doing wrong?

Here's all my JavaScript, but what I am having trouble with is the last addEventListener at the bottom of the code:

function Todo(title, description, price){
    this.title = title;
    this.description = description;
    this.price = price;
}

document.todo.addEventListener("submit", function(e){
    e.preventDefault();
    var titleForm = document.todo.title.value;
    var descriptionForm = document.todo.description.value;
    var priceForm = document.todo.price.value;
    var newTodo = new Todo(titleForm, descriptionForm, priceForm);

    axios.post("https://api.todo.io/name/todo", newTodo).then(function(response){
    console.log(response.data);
})
})

axios.get("https://api.todo.io/name/todo").then(function(response){
    for(var i = 0; i < response.data.length; i++){
        var h1 = document.createElement("h1");
        var h3 = document.createElement("h3");
        var h3Price = document.createElement("h3");
        var div = document.createElement("div");
        var delButton = document.createElement("button");

        var displaytitle = document.createTextNode(`Title: ${response.data[i].title}`);
        var displayDescription = document.createTextNode(`Description: ${response.data[i].description}`);
        var displayPrice = document.createTextNode(`Price: ${response.data[i].price}`);
        var displayButton = document.createTextNode("Delete");

        h1.appendChild(displaytitle);
        h3.appendChild(displayDescription);
        h3Price.appendChild(displayPrice);
        delButton.appendChild(displayButton);

        div.appendChild(h1);
        div.appendChild(h3);
        div.appendChild(h3Price);
        div.appendChild(delButton);


        document.body.appendChild(div);

           delButton.addEventListener("submit", function(e){
               e.preventDefault();
               axios.delete(`https://api.todo.io/name/todo/${response.data[i]._id}`).then(function(response){
                console.log("Todo Deleted!");
            })
           })  
        }
    console.log(response.data);
});

`delButton` is a button element i created using JavaScript. I don't think showing the HTML would help much as I have created all the elements using JavaScript. — Christian Lopez, May 06 '18 at 02:10
One major problem is value of `i` when event occurs. Must read and understand [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — charlietfl, May 06 '18 at 02:22
Second major problem is a button has no `submit` event only
does — charlietfl, May 06 '18 at 02:23

score 1 · Accepted Answer · answered May 06 '18 at 02:38

From the docs for the 'submit' event:

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)

As for your scoping problem, if you extract the body of your for loop as a function:

function addTodo({ _id, description, price, title }) {
    const h1 = document.createElement("h1");
    const displaytitle = document.createTextNode(`Title: ${title}`);
    h1.appendChild(displaytitle);

    const h3 = document.createElement("h3");
    const displayDescription = document.createTextNode(`Description: ${description}`);
    h3.appendChild(displayDescription);

    const h3Price = document.createElement("h3");
    const displayPrice = document.createTextNode(`Price: ${price}`);
    h3Price.appendChild(displayPrice);

    const delButton = document.createElement("button");
    const displayButton = document.createTextNode("Delete");
    delButton.appendChild(displayButton);
    delButton.addEventListener("click", function(e) {
        e.preventDefault();

        axios
          .delete(`https://api.todo.io/name/todo/${_id}`)
          .then(function(response) {
            console.log("Todo Deleted!");
          });
    });

    const div = document.createElement("div");
    div.appendChild(h1);
    div.appendChild(h3);
    div.appendChild(h3Price);
    div.appendChild(delButton);

    document.body.appendChild(div);
}

axios.get("https://api.todo.io/name/todo").then(function(response) {
    for (var i = 0; i < response.data.length; i++) {
        addTodo(response.data[i]);
    }
    console.log(response.data);
});

How to I perform a delete request one item at a time using Axios?

1 Answers1