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