On button press, fetch delete not working

Question

For school I'm working on a To-Do-List that communicates with a local api my school provided.

I have the GET working, the POST working but the DELETE is not working for me. It's not working at all, I can press the delete button but nothing works.

I wrote this for the DELETE part, I have to give a header because otherwise I get a 415 error. The items I send to the local api get a random ID with the tag "_id".

async function removeItem(id) {
    const deleted = await fetch(`http://localhost:3000/${id}`, {
    method: "DELETE",
    headers: {"Content-Type":"application/json"}
});
}

I have a Delete button with the following code:

async function deleteItem() {


document.getElementById("delete-button").addEventListener("click", removeItem)

renderTodo()
};

The renderToDo function is the function that displays all the items in the database as LI items.

If you guys need more code, just let me know.

Hopefully my question is a bit clear, I'm fairly new to developing.

Thanks in advance.

Have you looked at this? https://stackoverflow.com/questions/40284338/javascript-fetch-delete-and-put-requests You get the 415 error because your schools API doesn't accept it, your payload isn't correct. You could use postman to check it, might be easyer — Maxime C., Dec 01 '21 at 12:24
The problem is not the 415, I'm not getting that anymore, it's the fact that when I press the delete button, nothing happens. Could it be that my deleteItem function is wrong? — bo0ii, Dec 01 '21 at 12:36
Well you use `.addEventListener` every time you use `deleteItem` witch is bad. Next thing is that `removeItem` expects an parameter but you dont even pass one. — bill.gates, Dec 01 '21 at 12:36

score 0 · Answer 1 · answered Dec 01 '21 at 12:34

0

I think you have an incorrect url. I suspect you are now trying to call DELETE on your local environment, probably resulting in the 415 because it tried to connect to your local webserver.

The reason you need the Content-Type header here is because the local webserver requires it. Usually browsers add the Content-Type of application/html because they wish to render the html.

I think if you change the url to the correct one, it will work.

answered Dec 01 '21 at 12:34

Arcturus

26,677
10
92
107

The problem is not the 415, I'm not getting that anymore, it's the fact that when I press the delete button, nothing happens. Could it be that my deleteItem function is wrong? – bo0ii Dec 01 '21 at 12:36
The problem was not the 415. It is the url you're trying to call DELETE on: `http://localhost:3000/${id}`.. Are you sure it is running on localhost? – Arcturus Dec 01 '21 at 12:37

score 0 · Answer 2 · answered Dec 01 '21 at 12:57

Depends on if your items are static or dynamic. If they are static you could just add OnClick function manual with as parameter your id.

If its dynamic you will need to write a foreach or for function depending on your object. With this foreach you could add an addEventListener for click.

async function deleteItem() {


   document.getElementById("delete-button").addEventListener("click",removeItem)

   renderTodo()
};

Is wrong, if you have multiple delete buttons for each item you will need to pass the id with removeItem.

If you have one delete button your function will need to fetch the ID from somewhere else. If this is the case i suggest you add an hidden field with the value from your item in it. This id will be filled in if a person clicks on your item.

something like this :

 <input type="hidden" id="selectedItemId" value="<id of your selected item>">

Then your li would look something like this based on (Get Clicked <li> from <ul onclick>):

<ul id="test">
  <li value="1">Item 1</li>
  <li value="1">Item 2</li>
  <li value="1">Item 3</li>
</ul>

Where your function is :

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('test');
    ul.onclick = function(event) {
    var target = getEventTarget(event);
    
    var hiddenItem = document.getElementById("selectedItemId");
    hiddenItem.value = target.value
};

Your button would look something like this :

<button type="button" id="delete" onClick="onDelete()"> Delete Item </button>

your function :

function onDelete() {
    var id = document.getElementById("selectedItemId").value;
    const deleted = await fetch(`http://localhost:3000/${id}`, {
       method: "DELETE",
       headers: {"Content-Type":"application/json"}
    });
}

On button press, fetch delete not working

2 Answers2