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

Answer 1

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