Añadir, cambiar, eliminar listas con jQuery

En este artículo vamos a ver como podemos trabajar sobre listas declaradas en HTML usando jQuery.

Para tratar sobre este tema vamos a crear dos ejemplos:

EJEMPLO 1 (insertar, editar, borrar listas): Pulsar aquí
EJEMEPLO 2 (migas de pan): Pulsar aquí

Comencemos por el primer caso prático:

EJEMPLO 1: Tratamiento de listas con jQuery

En esta demo vamos a tener tres botones diferentes donde cada botón realizará una una funcionalidad.

Nuestro script va a tener tres funcionalidades.

  • Añadir nuevo elemento a una lista

Cuando se pulse el botón con el identificaror id= «agregaContenido» se creará un nuevo elemento

<li>

dentro de la lista , en nuestro caso se creará dicho elemento dentro de la etiqueta ul, exactamente dentro de:

<ul id="ul-grupoLista">

Para añadir nuevos elementos se hará lo siguiente:

$("#ul-grupoLista").append('');

le decimos primero donde queremos insertar nuestro elemento #ul-grupoLista y después con la función .append le decimos que lo añada.

  • Modificar el contenido de una lista

Cambiamos el contenido de los elementos que contengan la clase .cambia, como los elementos que hemos creado anteriormente con el botón «Nuevo elemento» le habiamos incluido dicha clase, cuando pulsemos el botón de «cambiar contenido» editaremos su valor gracias a la función .html

  • Eliminar una lista

Cuando pulsemos el botón «Elimina contenido» borraremos todos los elementos

<li>

creados previamente.

En el siguiente código está definido los scripts necesarios con su respecto código HTML.

 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //Agregamos nuevo elemento
    $('#agregaContenido').click(function () 
    {
        var valorTexto = $(this).text();
        var rutaEnlace = '#';
 
        $("#ul-grupoLista").append( '<li id="breadcrumbs-li1" class="cambia estructura" ><a href="'+ rutaEnlace +'" > ' +valorTexto);
    });
 
    //Cambiamos el contenido
    $( '#cambiaContenido' ).on( "click", function() 
    {
        $(".cambia").html("Elemento <b>editado!</b>");
    });
 
    //Eliminamos todas las opciones
    $( '#eliminaContenido' ).on( "click", function() 
    {
        //eliminamos todos los ementos que contengan la etiqueta <li>
        $('li').remove();
    });
});
</script>
 
<STYLE type="text/css">
.estructura {margin-left:3px; display: inline-block; list-style-position:inside; border: 1px solid black;}
</STYLE>
 
</head>
<body>
<div>
 
</div>
 
<ul id="ul-grupoLista">
 
</ul>
<br/>
 
<!-- añadimos tres botones, cada uno realizará una función -->
 
<!-- crea un nuevo elemento en la lista -->
<button id="agregaContenido">Nuevo elemento</button>
 
<!-- cambia el contenido de los elementos de la lista -->
<button id="cambiaContenido">Cambiar contenido</button>
 
<!-- elimina todos los elementos de la lista -->
<button id="eliminaContenido">Elimina contenido</button>
 
</body>
</html>

EJEMPLO 2: Migas de pan con jQuery

En el segundo ejemplo vamos a crear unas breadcrumbs «migas de pan» sencilla con jQuery de forma dinámica y de paso usar alguna función interesante como :last-child y un bucle para recorrer las listas.

Nuestro caso práctico va a tener 6 elementos dentro de una lista, cuando pulsemos en algún elemento de la lista se borraran los elementos existentes a partir de este, por ejemplo si tengo 6 elementos y pulso el elemento 4 se tendrá que borrar el elemento 5 y 6 y si yo selecciono el elemento 1 se borraran los elementos 2,3,4,5,6.

Los elementos de la lista:

<li>

tendrán que tener un atributo llamado orden donde se definirá su posición.

 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    //se activará el evento cuando se haga click en un elemento que contenga la etiqueta <li>
    $('li').click(function () 
    {
        //se obtiene el foco del último elemento de la lista y se coge su atributo orden
        var ultimo = $('li:last-child').attr('orden');
 
        //se obtiene el campo orden del atributo donde se ha realizado el click
        var orden = $(this).attr('orden');
 
        //se recorre los elementos de la lista
        $("ul#ul-breadcrumbs li").each(function(i)
        {
           //guardamos el indice actual del elemento
           var index = i;
 
           //si el indice actual es mayor a la variable orden se elimina dicho elemento
           if(index > orden)
           {
              //elimina elemento
              $(this).remove();
           }
        });
    });
});
</script>
 
<STYLE type="text/css">
.ultimo {color:#006CC1;}
.cambio {color:#FA0001;}
.estructura {margin-left:3px; display: inline-block; list-style-position:inside; border: 1px solid black;}
</STYLE>
 
</head>
<body>
<div>
<p> Migas de pan</p>
<ul  id="ul-breadcrumbs">
<li orden="0" class="estructura">
<a href="#">Elemento 1</a>
</li>
<li orden="1" class="estructura">
<a href="#">Elemento 2</a>
</li>
<li orden="2" class="estructura">
<a href="#">Elemento 3</a>
</li>
<li orden="3" class="estructura">
<a href="#">Elemento 4</a>
</li>
<li orden="4" class="estructura">
<a href="#">Elemento 5</a>
</li>
<li orden="5" class="estructura">
<a href="#">Elemento 6</a>
</li>
</ul>
</div>
 
</body>
</html>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada.