3

En el documento HTML hay una lista, tengo que crear una lista nueva con sus 5 primeros elementos de la lista original y después borrar dichos elementos, de la lista original. Para borrarlo, recorro las dos listas y compruebo si el contenido del <li> coincide, y si coincide, el elemento es eliminado de la lista original, pero con el método remove() no borra.

$(document).ready(function () {
    var comunidades = [];
    var listaNueva = $("<ul id='lista-nueva'></ul>");
    var listaOriginal = $("ul#lista-original li");

    for (i = 0; i < 5; i++) {
        comunidades.push("<li>" + $("ul li").eq(i).text() + "</li>");
    }
    $("body").append(listaNueva.append(comunidades.join("")));

    for (i = 0; i < listaOriginal.legth; i++) {
        if (listaOriginal.eq(i).text() == listaNueva.eq(i).text()) {
            listaOriginal.eq(i).remove();
        }
    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="lista-original">
        <li><span>Andalucía</span></li>
        <li><span>Aragón</span></li>
        <li><span>Asturias</span></li>
        <li><span>Canarias</span></li>
        <li><span>Cantabria</span></li>
        <li><span>Castilla y León</span></li>
        <li><span>Castilla La Mancha</span></li>
        <li><span>Cataluña</span></li>
        <li><span>Ceuta</span></li>
        <li><span>Comunidad de Madrid</span></li>
        <li><span>Comunidad Valenciana</span></li>
        <li><span>Extremadura</span></li>
        <li><span>Galicia</span></li>
        <li><span>Islas Baleares</span></li>
        <li><span>La Rioja</span></li>
        <li><span>Melilla</span></li>
        <li><span>Navarra</span></li>
        <li><span>País Vasco</span></li>
        <li><span>Región de Murcia</span></li>
    </ul>

2 respuestas 2

3

Dos problemas grandes a destacar:

1- En la línea 11 del código JS pusiste legth en vez de length, por lo que nunca va a entrar a ese ciclo for.

2- La comparación dentro del mismo for también va a fallar, porque listaNueva en este caso no es un array, sino un string, lo que debes hacer es tomar la nueva lista que ya fue graficada (renderizada) e iterar a partir de ella. El código quedaría más o menos así:

$(document).ready(function () {
                var comunidades = [];
                var listaNueva = $("<ul id='lista-nueva'></ul>");
                var listaOriginal = $("ul#lista-original li");
    
                for (i = 0; i < 5; i++) {
                    comunidades.push("<li>" + $("ul li").eq(i).text() + "</li>");
                }
                $("body").append(listaNueva.append(comunidades));
                
                var listaNuevaGraficada = $("ul#lista-nueva li");
                for (i = 0; i < listaNuevaGraficada.length; i++) {
                    if (listaOriginal.eq(i).text() === listaNuevaGraficada.eq(i).text()) {
                        listaOriginal.eq(i).remove();
                    }
                }
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id="lista-original">
            <li><span>Andalucía</span></li>
            <li><span>Aragón</span></li>
            <li><span>Asturias</span></li>
            <li><span>Canarias</span></li>
            <li><span>Cantabria</span></li>
            <li><span>Castilla y León</span></li>
            <li><span>Castilla La Mancha</span></li>
            <li><span>Cataluña</span></li>
            <li><span>Ceuta</span></li>
            <li><span>Comunidad de Madrid</span></li>
            <li><span>Comunidad Valenciana</span></li>
            <li><span>Extremadura</span></li>
            <li><span>Galicia</span></li>
            <li><span>Islas Baleares</span></li>
            <li><span>La Rioja</span></li>
            <li><span>Melilla</span></li>
            <li><span>Navarra</span></li>
            <li><span>País Vasco</span></li>
            <li><span>Región de Murcia</span></li>
        </ul>

Con esto ya estarías comparando dos arrays y se hará la eliminación efectiva de los campos duplicados. Para efectos de pruebas siempre es bueno utilizar console.log() en diferentes puntos del código para cerciorarse de cómo va cambiando la información.

Espero haber ayudado.

1

he modificado un poco tu codigo del bucle para eliminar las entradas añadidas a la lista nueva utilizando un indexOfpara buscar coincidencias, tu codigo quedaria asi:

$(document).ready(function () {
    var comunidades = [];
    var listaNueva = $("<ul id='lista-nueva'></ul>");
    var listaOriginal = $("ul#lista-original li");

    for (i = 0; i < 5; i++) {
        comunidades.push("<li>" + $("ul li").eq(i).text() + "</li>");
    }
    $("body").append(listaNueva.append(comunidades.join("")));

    for (i = 0; i < listaOriginal.length; i++) {
        if ( listaNueva[0].innerText.indexOf(listaOriginal.eq(i).text())>-1) {
            listaOriginal.eq(i).remove();
        }
    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="lista-original">
        <li><span>Andalucía</span></li>
        <li><span>Aragón</span></li>
        <li><span>Asturias</span></li>
        <li><span>Canarias</span></li>
        <li><span>Cantabria</span></li>
        <li><span>Castilla y León</span></li>
        <li><span>Castilla La Mancha</span></li>
        <li><span>Cataluña</span></li>
        <li><span>Ceuta</span></li>
        <li><span>Comunidad de Madrid</span></li>
        <li><span>Comunidad Valenciana</span></li>
        <li><span>Extremadura</span></li>
        <li><span>Galicia</span></li>
        <li><span>Islas Baleares</span></li>
        <li><span>La Rioja</span></li>
        <li><span>Melilla</span></li>
        <li><span>Navarra</span></li>
        <li><span>País Vasco</span></li>
        <li><span>Región de Murcia</span></li>
    </ul>

Espero que te sirva, saludos.

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.