0

Estoy tratando de con javascript eliminar el texto de esta lista:

            <ul>
                <li class="mueble">Mesa</li>
                <li class="escolar">Libreta</li>
                <li class="escolar">Lapiz</li>
                <li class="electrodomestico">Ventilador</li>
                <li class="electrico">Enchufe</li>
                <li class="decoracion">Alfombra</li>
                <li class="television">Mando</li>
                <li class="decoracion">Ambientador</li>
                <li class="electrico">Cable</li>
                <li class="electrico">Lampara</li>
            </ul>

he creado un script que pasados 3 segundos pregunta algo si le damos a confirmar debería borrar todos los textos de li y dejar los li vacios pero no se muy bien como hacer esto correctamente.

setTimeout(() => confirm('confirmas?'), 3000);
if (confirm) {
  document.getElementsByTagName(li).removeAttribute('class');
}

después quiero añadir un nuevo valor a cada li he pensado en usar

elemento. setAttribute("Mesa", "Alfombra"); 

Pero nose si esto es correcto, gracias.

2 respuestas 2

1

El setAttribute es como bien lo dice, añadir un atributo a la etiqueta, lo que tu ejemplo haría (si seleccionaras un solo "li") sería lo siguiente: <li mesa>Texto de Lista </li>

En cuanto al setTimeout, te recomiendo que uses las funciones de manera tradicional si aún no estás familiarizado con las funciones flecha, ya que la condición al confirmar la estás estableciendo fuera de donde declaraste el confirm, y al no guardarlo dentro de una variable, estarías e

Por lo cual, si estás obteniendo todos los elementos

  • es necesario que recorras con un bucle los mismos y elimines el valor con innerHTML, para asignar un nuevo valor, tendrías que hacer lo mismo:

        <ui>
            <li>Texto1</li>
            <li>Texto2</li>
            <li>Texto3</li>
            <li>Texto4</li>
            <li>Texto5</li>
            <li>Texto6</li>
        </ui>
        
    <script>
        
        setTimeout( function () {
            result = confirm('Confirmas?');
            if(result == true) {
                list = document.getElementsByTagName('li');
                console.log(list);
                for (let i = 0; i < list.length; i++) {
                    const element = list[i];
                    element.innerHTML = '';
                    
                }
            }
        }, 3000)
    </script>
    
  • 6
    • Hola!!! muchisimas gracias por tu respuesta es super util para mi!!! ya que no sabia ya como eliminar las palabras, tengo una pregunta si quisiera añadir unas nuevas palabras como se haría ??? esta bine usar setattribute?
      – user148424
      Commented el 25 nov. 2020 a las 19:42
    • 1
      No, usuar setAttribute como te comenté en la respuesta, no añade el texto dentro de la etiqueta <li>, tendrías que hacer el mismo proceso del bucle, si te fijas, para limpiar, dentro del ciclo y teniendo ya un solo elemento seleccionado, usé innerHTML, con esto asignas que quiers que esté dentro del elemento, por lo que tendrías que hacer algo como "elemento.innerHTML = 'mesa'. Commented el 25 nov. 2020 a las 19:49
    • mmm entonces debería meter por ejemplo 10 elemento.innerHTML ? o puedo hacer por ejemplo un array dentro del innerHTML ? en plan elemento.innerHTML = ["mesa","alfombra","lapiz"] ??
      – user148424
      Commented el 25 nov. 2020 a las 19:53
    • Hay que aclarar una cosa primero, quieres cambiar el texto del elemento o bien, cambiar el valor de los atributos (que en este caso serian las clases)? Commented el 25 nov. 2020 a las 20:06
    • 1
      Añadí otra respuestá para ver si soluciona mejor el problema y tus dudas Commented el 25 nov. 2020 a las 20:39
    0

    Añado otra respuesta de acuerdo a el ejercicio que requieres hacer, comentado para ver si de esa manera es más claro:

        <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        <ui>
            <li class="mueble">Mesa</li>
            <li class="escolar">Libreta</li>
            <li class="escolar">Lapiz</li>
            <li class="electrodomestico">Ventilador</li>
            <li class="electrico">Enchufe</li>
            <li class="decoracion">Alfombra</li>
            <li class="television">Mando</li>
            <li class="decoracion">Ambientador</li>
            <li class="electrico">Cable</li>
            <li class="electrico">Lampara</li>
        </ui>
    
        <script>
            // Definimos el array de valores nuevos (no importa el orden)
            objetos = [
                'Mesa',
                'Libreta',
                'Lapiz',
                'Ventilador',
                'Enchufe',
                'Alfombra',
                'Mando',
                'Ambientador',
                'Cable',
                'Lampara'
            ];
            // Establecemos el tiempo de 3s
            setTimeout(function () {
                // Lanzamos mensaje de confirmación
                result = confirm('Confirmas?');
                // Si acepta...
                if (result == true) {
                    // Obtenemos los elementos por la etiqueta 'li'
                    list = document.getElementsByTagName('li');
                    // Comenzamos un bucle donde la cantidad de iteraciones sea la longitud de la colección
                    for (let i = 0; i < list.length; i++) {
                        // Guardamos el li actual en la variable element
                        const element = list[i];
                        // Al elemento actual le asignamos el texto '' (que sería dejarlo en blanco)
                        element.innerHTML = '';
                    }
                }
    
                setTimeout(function () {
                    // *****Para asignar los valores ordenados después de haber borrado*****
                    // Confirm para ordenar
                    ordenar = confirm('Mostrar los elementos ordenados?');
                    // Si acepta...
                    if (ordenar == true) {
                        // ordenamos los objetos con la función sort
                        objetos.sort();
                        // tomamos de nuevo los elementos li
                        list = document.getElementsByTagName('li');
                        // Como ya sabemos que la cantidad de elementos en el array y los elementos li son los mismos, usamos un solo bucle
                        for (let i = 0; i < list.length; i++) {
                            // guarda el elemento li actual en la variable element
                            const element = list[i];
                            // Al elemento li actual, le vamos a asignar de texto, el valor en la posisión [i] del array de objetos (previamente ordenado)
                            element.innerHTML = objetos[i];
    
                        }
                    }
                }, 3000);
    
            }, 3000)
        </script>
    
    </body>
    
    </html>
    
    1
    • wau muchas gracias!!! me he hecho una idea de como debía funcionar!! estaba revisando los apuntes que nos paso el profesor pero no lograba entender nada!!!! He modificado mi codigo en base a tu respuesta una vez la he entendido y ya funciona correctamente!
      – user148424
      Commented el 25 nov. 2020 a las 21:09

    Tu Respuesta

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