en primer lugar, súper principiante aquí. Estoy tratando de hacer una lista de cosas por hacer. La parte de agregar funciona bien, se ve así:
let salvar = document.getElementById("salvar") let remove = document.getElementById("remover") salvar.onclick = saveitem function saveitem() { let item = document.getElementById("input").value let novoitem = document.createElement("tr") let lista = document.getElementById("todoitems") novoitem.innerText = item lista.appendChild(novoitem) } <input type="text" id="input"> <div class="container"> <button id="salvar">Save</button> <button id="remover">Remove</button> </div> <table id="todoitems"> <tr> <th>Tarefa</th> </tr> </table>¿Cómo puedo crear una función que elimine el último elemento agregado?
En primer lugar, debemos usar el marcado correcto para su tabla. tr debe ser hijo de thead o tbody . En segundo lugar, no puede tener nodos de texto como elementos secundarios de tr ; estos deben colocarse en los elementos td o th . También es una mala práctica usar nombres de variables que no están en inglés, lo cambié a inglés.
Dicho esto, aquí está su solución:
let add = document.getElementById("add") let remove = document.getElementById("remove") remove.onclick = removeLastItem; add.onclick = saveitem; function saveitem() { let item = document.getElementById("input").value; let newRow = document.createElement("tr"); let list = document.getElementById("todoitems"); newRow.innerHTML = `<td>${item}</d>`; list.appendChild(newRow); } function removeLastItem() { document.querySelector('#todoitems tr:last-child')?.remove(); } <input type="text" id="input"> <div class="container"> <button id="add">Save</button> <button id="remove">Remove</button> </div> <table> <thead> <tr> <th>Tarefa</th> </tr> </thead> <tbody id="todoitems"></tbody> </table> Explicación de la función removeLastItem() :
document.querySelector('#todoitems tr:last-child')?.remove() querySelector le permite pasar un selector de CSS que funciona igual que en CSS. Para seleccionar el último tr en tbody#todoitems , usa #todoitems tr:last-child como selector de CSS. el ? es el navegador seguro/encadenamiento opcional que se asegura de que su código no arroje un error si alguien hace clic en el botón Eliminar cuando no hay elementos en su tabla.
document.getElementById('todoitems').lastChild.remove()usar la propiedad del último hijo
en lugar de usar el botón Eliminar, puede agregar el botón dentro de tr y, cuando se presiona, puede eliminar ese tr por usted
function saveitem(){ let item = document.getElementById("input").value let novoitem = document.createElement("tr") let delBtn = document.createElement("button") delBtn.innerText = "del" delBtn.addEventListener("click",function(){ novoitem.remove(); }) let lista = document.getElementById("todoitems") novoitem.innerText = item lista.appendChild(novoitem) novoitem.append(delBtn); }