1

Estoy siguiendo un tutorial dónde hay un botón que al darle click, añade a la lista de abajo lo que hayas escrito en el texto de input

 <h1>Lista de la compra</h1>
    <p id="first">Para antes del miercoles 26</p>
    <input id="inputusuario" type="text" placeholder="añadir items">
    <button id="accioar">Enter</button>
    <button id="borrar">Borrar</button>
    <ul>
        <li>2 Usb</li>
        <li>1x4 Jack Reaper</li>
        <li>05.5 mm Denon</li>
        <li>2 Usb 3.0</li>
        <li>24 Cros Relings</li>
    </ul>

Eso lo consigue con este codigo:

var boton = document.getElementById("accioar");
var input = document.getElementById("inputusuario");
var listafunc = document.querySelector("ul");

boton.addEventListener("click", function() {
    var nuevoli = document.createElement("li");
    var textoli = document.createTextNode(input.value);
    nuevoli.appendChild(textoli);
    listafunc.appendChild(nuevoli);
});

Así que pensé en haber si podía hacer otro botón en el que si le das click, te borra de la lista lo que se haya añadido anteriormente. Pero me borra la lista entera haciendolo así:

var borrar = document.getElementById("borrar")

borrar.addEventListener("click", function() {
    listafunc.remove();
})

También probé de otra manera aunque de esta no me hace absolutamente nada:

var borrar = document.getElementById("borrar");

borrar.addEventListener("click", function() {
    var nuevoli = document.createElement("li");
    var textoli = document.createTextNode(input.value);
    nuevoli.appendChild(textoli);
    nuevoli.remove();
})

2 respuestas 2

3

Te anexo un ejemplo en de lo que solicitas:

var boton = document.getElementById("accioar");
var input = document.getElementById("inputusuario");
var listafunc = document.querySelector("ul");
var botonDelete = document.getElementById("borrar");


boton.addEventListener("click", function() {
    var nuevoli = document.createElement("li");
    var textoli = document.createTextNode(input.value);
    nuevoli.appendChild(textoli);
    listafunc.appendChild(nuevoli);
});

function remove_child() {
  var list = document.getElementById('list');
  var item = listafunc.lastElementChild;
  list.removeChild(item);
}
 <h1>Lista de la compra</h1>
    <p id="first">Para antes del miercoles 26</p>
    <input id="inputusuario" type="text" placeholder="añadir items">
    <button id="accioar">Enter</button>
    <button id="borrar" onclick="remove_child()">Borrar</button>
    <ul id="list">
        <li>2 Usb</li>
        <li>1x4 Jack Reaper</li>
        <li>05.5 mm Denon</li>
        <li>2 Usb 3.0</li>
        <li>24 Cros Relings</li>
    </ul>

Si te das cuenta lo que hice en el código fue agregar la lista a una variable llamada list, posteriormente utilizo la propiedad lastElementChild para luego eliminar el último de la lista con removeChild. ¿Por que hice esto?, bueno pues resulta que si usas directamente lastChild este no te eliminará hasta el segundo click, la diferencia entre esta propiedad y lastElementChild, es que lastChild devuelve el último nodo secundario, un nodo de texto o un nodo (dependiendo de cual es el último), mientras que lastElementChild devuelve el último elemento de nodo secundario (ignora el texto y como los nodos).

También por si en un futuro gustas aprender más, puedes utilizar JQuery para resolverlo de manera sencilla, te anexo un ejemplo:

var boton = document.getElementById("accioar");
var input = document.getElementById("inputusuario");
var listafunc = document.querySelector("ul");

boton.addEventListener("click", function() {
    var nuevoli = document.createElement("li");
    var textoli = document.createTextNode(input.value);
    nuevoli.appendChild(textoli);
    listafunc.appendChild(nuevoli);
});

$('#borrar').on('click',function(){
  $('#myList li:last-child').last().remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Lista de la compra</h1>
    <p id="first">Para antes del miercoles 26</p>
    <input id="inputusuario" type="text" placeholder="añadir items">
    <button id="accioar">Enter</button>
    <button id="borrar">Borrar</button>
    <ul id="myList">
        <li>2 Usb</li>
        <li>1x4 Jack Reaper</li>
        <li>05.5 mm Denon</li>
        <li>2 Usb 3.0</li>
        <li>24 Cros Relings</li>
    </ul>

Lo que hice fue agregar un evento click al botón borrar. Lo que hace es buscar el id myList y evaluar la lista que tiene dentro, luego uso la función last().remove() para eliminar el último en la lista.

Te anexo una liga a la documentación por si te interesa: https://api.jquery.com/last/

Espero te ayude. Saludos.

2
  • Si dentro de los requerimientos de lo que pregunta el OP, no se puede usar jquery (tampoco coloco la etiqueta). Que tal si tbn dejas un ejemplo de como seria hacerlo sin jquery. De esta forma le dejas dos opciones. el 21 ene. 2019 a las 17:26
  • Tienes razón @OrlandoDeLaRosa, dejaré ambas opciones, aun me faltan ediciones. Saludos. el 21 ene. 2019 a las 17:43
1

Podrías probar con esto:

JS

var borrar = document.getElementById("borrar")

borrar.addEventListener("click", function() {
    listafunc.removeChild(listafunc.lastChild);
});

Te puedes aprovechar de que existe una propiedad que te devuelve el último hijo de un elemento (lastChild) y pasárselo como argumento a la función removeChild(), que lo que hace es borrar del elemento padre el hijo pasado como parámetro.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.