1

/**
         * Funcion que añade un <li> dentro del <ul>
         */
 function add_li()
 {
     var nuevoLi=document.getElementById("nuevo_li").value;
     if(nuevoLi.length>0)
     {
         if(find_li(nuevoLi))
         {
             var li=document.createElement('li');
             li.id=nuevoLi;
             li.innerHTML="<span onclick='eliminar(this)'>X</span>"+ " " +nuevoLi;
             document.getElementById("listaDesordenada").appendChild(li);
         }
     }
     return false;
 }

 /**
  * Funcion que busca si existe ya el <li> dentrol del <ul>
  * Devuelve true si no existe.
  */
 function find_li(contenido)
 {
     var el = document.getElementById("listaDesordenada").getElementsByTagName("li");
     for (var i=0; i<el.length; i++)
     {
         if(el[i].innerHTML==contenido)
             return false;
     }
     return true;
 }

 /**
  * Funcion para eliminar los elementos
  * Tiene que recibir el elemento pulsado
  */
 function eliminar(elemento)
 {
     var id=elemento.parentNode.getAttribute("id");
     node=document.getElementById(id);
     node.parentNode.removeChild(node);
 }

 function eliminarPrimero(){

 }

 function eliminarUltimo(){
  let x = document.querySelector('li');
  let cantidad = x.length;
  x = x.eq(cantidad - 1);
  x.remove();
 }
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Enunciado 2</title>
    </head>
    <body>
        <h1>Enunciado 2</h1>
        <h1>Añadir y eliminar elementos li de una lista desordenada ul con javascript</h1>
        <p>
            <form>
                <input type="text" id="nuevo_li">
                <br><input type="submit" onclick="return add_li()" value="añadir">
                <br><input type="submit" onclick="return eliminarPrimero()" value="eliminar primero">
                <br><input type="submit" onclick="return eliminarUltimo()" value="eliminar ultimo">
            </form>
        </p>
        <ul id="listaDesordenada">
            <li id="li_inicial">Linea 1</li>
            <script type="text/javascript">
                let li = document.getElementById("li_inicial")
                li.innerHTML="<span onclick='eliminar(this)'>X Linea 1</span>"+ " ";
            </script>
        </ul>
    </body>
    <script type="text/javascript" src="./enunciado_2.js"></script>
</html>

Tengo este código HTML y simplemente quiero que se pueda borrar el ultimo LI o el primer LI según el botón que se pulse mediante JavaScript. El código que tengo no me funciona. Gracias por la ayuda.

2 respuestas 2

2

Hola revise este código le hice algunos cambios para que funcione:

/**
         * Funcion que añade un <li> dentro del <ul>
         */
 function add_li()
 {
     var nuevoLi=document.getElementById("nuevo_li").value;
     if(nuevoLi.length>0)
     {
         if(find_li(nuevoLi))
         {
             var li=document.createElement('li');
             li.id=nuevoLi;
             li.innerHTML="<span onclick='eliminar(this)'>X</span>"+ " " +nuevoLi;
             document.getElementById("listaDesordenada").appendChild(li);
         }
     }
     return false;
 }

 /**
  * Funcion que busca si existe ya el <li> dentrol del <ul>
  * Devuelve true si no existe.
  */
 function find_li(contenido)
 {
     var el = document.getElementById("listaDesordenada").getElementsByTagName("li");
     for (var i=0; i<el.length; i++)
     {
         if(el[i].innerHTML==contenido)
             return false;
     }
     return true;
 }

 /**
  * Funcion para eliminar los elementos
  * Tiene que recibir el elemento pulsado
  */
 function eliminar(elemento)
 {
     var id=elemento.parentNode.getAttribute("id");
     node=document.getElementById(id);
     node.parentNode.removeChild(node);
 }

 function eliminarPrimero(){
  let x = document.querySelectorAll('li');
  let cantidad = x.length;
  if (cantidad > 0){
   x = x[0];
   x.remove();
  }
 
  return false;
 }

 function eliminarUltimo(){
  let x = document.querySelectorAll('li');
  let cantidad = x.length;
  if (cantidad > 0){
    x = x[cantidad - 1];
    x.remove();
  }
  
  return false;
 }
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Enunciado 2</title>
    </head>
    <body>
        <h1>Enunciado 2</h1>
        <h1>Añadir y eliminar elementos li de una lista desordenada ul con javascript</h1>
        <p>
            <form>
                <input type="text" id="nuevo_li">
                <br><input type="submit" onclick="return add_li()" value="añadir">
                <br><input type="submit" onclick="return eliminarPrimero()" value="eliminar primero">
                <br><input type="submit" onclick="return eliminarUltimo()" value="eliminar ultimo">
            </form>
        </p>
        <ul id="listaDesordenada">
            <li id="li_inicial">Linea 1</li>
            <script type="text/javascript">
                let li = document.getElementById("li_inicial")
                li.innerHTML="<span onclick='eliminar(this)'>X Linea 1</span>"+ " ";
            </script>
        </ul>
    </body>
    <script type="text/javascript" src="./enunciado_2.js"></script>
</html>

En la función eliminar último tiene q usar querySelectorAll para obtener todos los li después es acceder a la última posición o la primara si quiere eliminar el primero, además le agregué in if para comprobar que al menos exista un li, si no existe ninguno no tenemos nada que eliminar Saludos

1

ya tengo la respuesta a tu pregunta ya lo resolvi usando removeChild y childrenlenght, tambien tenias un error y es que tenias inputs de tipo submit es por eso que la pagina se pone en blanco usa unos de tipo button todo esta explicado en el codigo de abajo.

function add_li()
 {
     var nuevoLi=document.getElementById("nuevo_li").value;
     if(nuevoLi.length>0)
     {
         if(find_li(nuevoLi))
         {
             var li=document.createElement('li');
             li.id=nuevoLi;
             li.innerHTML="<span onclick='eliminar(this)'>X</span>"+ " " +nuevoLi;
             document.getElementById("listaDesordenada").appendChild(li);
         }
     }
     return false;
 }
 function find_li(contenido)
 {
     var el = document.getElementById("listaDesordenada").getElementsByTagName("li");
     for (var i=0; i<el.length; i++)
     {
         if(el[i].innerHTML==contenido)
             return false;
     }
     return true;
 }

 function eliminar(elemento)
 {
     var id=elemento.parentNode.getAttribute("id");
     node=document.getElementById(id);
     node.parentNode.removeChild(node);
 }

 function eliminarPrimero(){
  //obten el elemento padre de los elementoa li
  var padre = document.querySelector('#listaDesordenada');
  //obtenemos el primer hijo del elemento padre.
  var elemento1 = document.getElementsByTagName('li')[0];
  //y removemos el primer elemento hijo del elemento padre
  padre.removeChild(elemento1);
 }

 function eliminarUltimo(){
  //obten el elemento padre de los elementoa li
  var padre = document.querySelector('#listaDesordenada');
  //sacamos la cantidad de elementos hijo.
  var ultimo = padre.children.length;
  //le restamos 1
  ultimo = ultimo - 1;
  //obtenemos el ultimo hijo del elemento padre.
  var eu = document.getElementsByTagName('li')[ultimo];
  //y removemos el ultimo elemento hijo del elemento padre
  padre.removeChild(eu);
 }
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Enunciado 2</title>
    </head>
    <body>
        <h1>Enunciado 2</h1>
        <h1>Añadir y eliminar elementos li de una lista desordenada ul con javascript</h1>
        <p>
            <form>
                <input type="text" id="nuevo_li">
                <br><input type="button" onclick="return add_li()" value="añadir">
                <br><input type="button" onclick="return eliminarPrimero()" value="eliminar primero">
                <br><input type="button" onclick="return eliminarUltimo()" value="eliminar ultimo">
            </form>
        </p>
        <ul id="listaDesordenada">
            <li id="li_inicial">Linea 1</li>
        </ul>
    </body>
    <script type="text/javascript">
    // movi este elemento script abajo por que estorbaba dentro del ul, sigue funcionando.
                let li = document.getElementById("li_inicial")
                li.innerHTML="<span onclick='eliminar(this)'>X Linea 1</span>"+ " ";
            </script>
    <script type="text/javascript" src="./enunciado_2.js"></script>
</html>

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.