Para la escuela, estoy trabajando en una lista de tareas pendientes que se comunica con una API local proporcionada por mi escuela.
Tengo el GET funcionando, el POST funcionando pero el DELETE no funciona para mí. No funciona en absoluto, puedo presionar el botón Eliminar pero nada funciona.
Escribí esto para la parte ELIMINAR, tengo que dar un encabezado porque de lo contrario obtengo un error 415. Los elementos que envío a la API local obtienen una identificación aleatoria con la etiqueta "_id".
async function removeItem(id) { const deleted = await fetch(`http://localhost:3000/${id}`, { method: "DELETE", headers: {"Content-Type":"application/json"} }); }Tengo un botón Eliminar con el siguiente código:
async function deleteItem() { document.getElementById("delete-button").addEventListener("click", removeItem) renderTodo() };La función renderToDo es la función que muestra todos los elementos de la base de datos como elementos LI.
Si necesitan más código, háganmelo saber.
Espero que mi pregunta sea un poco clara, soy bastante nuevo en el desarrollo.
Gracias por adelantado.
Creo que tienes una URL incorrecta. Sospecho que ahora está tratando de llamar a DELETE en su entorno local, lo que probablemente resulte en el 415 porque intentó conectarse a su servidor web local.
La razón por la que necesita el encabezado Content-Type aquí es porque el servidor web local lo requiere. Por lo general, los navegadores agregan el tipo de contenido de la application/html porque desean representar el html.
Creo que si cambias la URL a la correcta, funcionará.
Depende de si sus artículos son estáticos o dinámicos. Si son estáticos, simplemente puede agregar el manual de la función OnClick con su ID como parámetro.
Si es dinámico, deberá escribir una función foreach o for dependiendo de su objeto. Con este foreach, puede agregar un addEventListener para hacer clic.
async function deleteItem() { document.getElementById("delete-button").addEventListener("click",removeItem) renderTodo() };No es correcto, si tiene varios botones de eliminación para cada elemento, deberá pasar la identificación con removeItem.
Si tiene un botón de eliminación, su función deberá obtener la ID de otro lugar. Si este es el caso, le sugiero que agregue un campo oculto con el valor de su artículo. Esta identificación se completará si una persona hace clic en su elemento.
algo como esto :
<input type="hidden" id="selectedItemId" value="<id of your selected item>">Entonces su li se vería así basado en ( Hacer clic <li> de <ul onclick> ):
<ul id="test"> <li value="1">Item 1</li> <li value="1">Item 2</li> <li value="1">Item 3</li> </ul>Donde esta tu funcion:
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 };Tu botón se vería así:
<button type="button" id="delete" onClick="onDelete()"> Delete Item </button>tu función:
function onDelete() { var id = document.getElementById("selectedItemId").value; const deleted = await fetch(`http://localhost:3000/${id}`, { method: "DELETE", headers: {"Content-Type":"application/json"} }); }